d3.js在添加元素时协调

d3.js coords while adding elements

本文关键字：协调 元素 添加 js d3      更新时间：2023-11-28

有人能解释一下d3.js places是如何在dom中使用svg-element的吗。下面是代码和小提琴。

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

D3.js将其放置在与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>

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

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

它选择第一个现有的SVG元素，并在if.

中放入一个额外的文本元素
相关文章：