Question

我无法确定此问题的确切原因。我正在为图表创建一个动态图例，我想将它放在“容器div”的确切中心。创建整个图例后，我将该组转换为使其位于div中心的位置。

然而，我看到的是SVG被“剪辑”为300px。从某种意义上说，它会溢出某些边界，并且SVG图形的那部分是不可见的。

我已在fiddle处提供了示例代码。

我提前为上面链接中写的混乱代码道歉。

这是我用来翻译svg。

d3.select(".avs-legend-group").attr("transform", "translate("+ xOffset + ",0)");

-where“.avs-legend-group”是一个包含“g”组元素的类。

Answer 1

问题似乎是浏览器问题（Firefox），其中未明确指定SVG的宽度。

在这种情况下SVG规范应该说的是

width =“＆lt; length＆gt;”

对于最外层的svg元素，SVG文档片段的固有宽度。对于嵌入的'svg'元素，'svg'元素所在的矩形区域的宽度。

负值是错误（请参阅错误处理）。值为零会禁用元素的渲染。

如果未指定属性，则效果就像指定了值“100％”一样。

动画：是的。

SVG 1.1 (Second Edition) – 16 August 2011（强调我的）

如果你明确地向包含的SVG提供100％的隐式值，那么这个问题就解决了。

var svg = d3.select("#" + uniqueIdentifier)
    .append("svg")
            .attr('width', '100%');

您可以通过修改后的JS Fiddle

自行查看

D3集团翻译溢出问题

1 个答案: