d3 Workaround for svg transform in chrome

Question

I've created an inner dimension to cut off plotting in d3. Here is the code:

var svg = d3.select("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 + "," + margin.top + ")");

This works fine in firefox. But I've learned that chrome does not support svg transforms like this (and it isn't working in chrome). Is there a workaround so that I can transform nestedSVG?

Answer 1

You can set x and y attributes on your nested SVG to create a translation of coordinates.

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

var nestedSVG = svg.append('svg') 
        .attr("width", innerWidth)
        .attr("height", innerHeight)
        .attr("x", margin.left)
        .attr("y", margin.top);

For more complicated transforms, you would use a parent or child <g> element and transform that, as you mentioned in comments to your previous question.