添加元素时的d3.js和弦

Question

有谁能解释一下d3.js places svg-element在dom.下面是密码和小提琴。

下面的代码应该向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

as将其放置在与HTML版本相同的位置。默认情况下，这两个元素放在一起。请参阅更新后的小提琴

<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中添加一个额外的文本元素。