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 ="#svg1") 
    .append("svg").attr("height", h)
    .attr("width", w)
    .attr('id', 'mainSVGContainer')
    .attr("height", h)
    .attr("width", w)
    .attr("class", "graph-svg-component")

Translating g :'#mainSVGContainer').transition().duration(1000).attr("transform", "translate(0 "+(-difference) +")")

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

Updated fiddle :

Related Query

More Query from same tag