d3 chrome中svg变换的解决方法 [英] d3 Workaround for svg transform in chrome

问题描述

我已经创建了一个内部维度来截断d3中的绘图。这是代码：

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

这在Firefox中正常工作。但我已经知道，chrome不支持像这样的svg变换（它不工作在chrome）。是否有解决方法，以便我可以转换nestedSVG？

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?

推荐答案

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

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

对于更复杂的变换，您可以使用父或子< g> ; 元素并转换，如您在上一个问题的评论中所述。

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.

这篇关于d3 chrome中svg变换的解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！