d3.js 添加元素时的坐标

Question

任何人都可以向我解释 d3.js places dom 中的 svg-element 是如何实现的。下面是代码和 fiddle.

下面的代码应该向 dom 添加一个文本元素，其中 x 轴和 y 轴如图所示。

<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 元素并在 if.

中放置一个额外的文本元素

d3.js 添加元素时的坐标

d3.js coords while adding elements

html

javascript

svg

d3.js