Thomas Jeffries Thomas Jeffries - 5 months ago 23
Javascript Question

d3 Nested SVG plots differently in firefox than in Chrome

I've seen versions of this question but they haven't helped me to solve this issue. I am using d3 with a nested svg, here is the code:

var svg ="body").append("svg")
.attr("width", width)
.attr("height", height);

var nestedSVG = svg.append('svg')
.attr("width", innerWidth)
.attr("height", innerHeight)
.attr("transform", "translate(" + margin.left + "," + + ")");

The nestedSVG makes an inner height/width so that some plots get cutoff appropriately. This works perfectly in firefox, but not in Chrome. When I scroll over nestedSVG in firebug it shows the appropriate dimensions, but when I scroll over nestedSVG in javascript console in chrome the dimensions are altered. This results in the plots being different. Any clue as to why this is happening?


The ability to set a transform on an <svg> element is new in SVG 2 and is not yet widely supported. Firefox does support it, IE does not currently, not sure about other UAs.