d3 在镶边中转换 svg 的解决方法

d3 Workaround for svg transform in chrome

本文关键字：svg 解决 方法 转换 d3      更新时间：2023-09-26

我创建了一个内部维度来切断 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 + ")");

这在火狐中工作正常。但是我了解到chrome不支持这样的svg转换（而且它在chrome中不起作用）。有没有解决方法，以便我可以转换嵌套SVG？

您可以在嵌套的 SVG 上设置x和y属性以创建坐标的平移。 

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>并转换它，正如您在上一个问题的注释中提到的。

相关文章：