score:1

Accepted answer

As JSBob and others from the following :

I found out Chrome, along with other browsers, don't support the translation of SVG elements. So, as a work around, I appended a g element to the SVG and translated that :

Appending g :

 svg = d3.select("#svg1") 
    .append("svg").attr("height", h)
    .attr("width", w)
    .append('g')
    .attr('id', 'mainSVGContainer')
    .attr("height", h)
    .attr("width", w)
    .attr("class", "graph-svg-component")

Translating g :

d3.select('#mainSVGContainer').transition().duration(1000).attr("transform", "translate(0 "+(-difference) +")")

Added the transition so you can see before and after :)

Updated fiddle : https://jsfiddle.net/thatOneGuy/8k8ggpcn/7/


Related Query

More Query from same tag