Question

任何人都可以向我解释d3.js places svg-element在dom中的情况。下面是代码和小提琴。

下面的代码应该将文本元素添加到带有x和y轴的dom中。

<svg height="100" width="100">
    <text x="0" y="25">Hello Shane</text>
</svg>

以下代码应该以JS方式执行相同的操作。

d3.select("body").append("svg").attr("width", 100).attr("height",100).append("text").text("Hello Shane").attr("x", 0).attr("y", 25).style("fill", "blue");

为什么两个文本not overlapping here? http://jsfiddle.net/8gcsxbay/1/

我使用普通的HTML标记放置一个，而另一个使用d3/js方式。两个坐标都相同，但它们显示不同的coords。

Answer 1

D3.js将其放在与HTML版本相同的位置。默认情况下，这两个元素彼此相邻放置。查看更新后的fiddle

<svg height="100" width="100">
    <text x="0" y="25">Hello Shane</text>
</svg>
<svg height="100" width="100">
    <text x="0" y="25">Hello Shane</text>
</svg>

Answer 2

或者，如果您要将蓝色文本添加到现有SVG，请使用

d3.select("svg").append("text")…

选择第一个现有的SVG元素，并将其他文本元素放入其中。

添加元素时d3.js coords

2 个答案: