d3 在 chrome 中进行 svg 转换的解决方法答案

【问题标题】：d3 Workaround for svg transform in chromed3 在 chrome 中进行 svg 转换的解决方法
【发布时间】：2015-02-01 17:13:39
【问题描述】：

我创建了一个内部维度来切断 d3 中的绘图。代码如下：

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 + ")");

这在 Firefox 中运行良好。但我了解到 chrome 不支持像这样的 svg 转换（而且它在 chrome 中不起作用）。有没有一种解决方法可以转换nestedSVG？

【问题讨论】：

为什么不将“nestedSVG”附加到 div 中？
在

标签： javascript google-chrome svg d3.js

【解决方案1】：

您可以设置x and y attributes on your nested SVG 来创建坐标平移。

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);

对于更复杂的转换，您可以使用父或子 <g> 元素并对其进行转换，as you mentioned in comments to your previous question。

【讨论】：