我在向现有元素插入新同级元素时遇到问题。
我有这个结构
<svg>
<g>
<path class="data"></path>
<path class="data"></path>
</g>
</svg>
并且想要这个结构
<svg>
<g>
<path class="data"></path>
<text></text>
<path class="data"></path>
<text></text>
</g>
</svg>
但是如果我使用 d3.js 插入功能
d3.select("g").insert("text", "path.data");
我得到以下内容(尽管按类名选择)
<svg>
<g>
<text></text>
<path class="data"></path>
<path class="data"></path>
</g>
</svg>
有什么想法吗?
最佳答案
首先,值得注意的是,插入函数中的第二个参数是一个before选择器。此外,链式操作作用于左侧结果。
所以你已经完成了
// select all the g elements (only 1)
d3.select("g")
// For each g, insert a text element before "path.data"
.insert("text", "path.data");
您想要对每个子“.data”执行操作,因此您需要选择每个“.data”元素并对每个元素执行操作。我不完全确定 d3 希望您如何在特定子项之后插入元素。我发现使用 DOM API 来创建和插入元素要容易得多,但使用 d3.each 函数来迭代选择则要容易得多。
d3.selectAll("g > .data").each(function () {
var t = document.createElement('text');
this.parentNode.insertBefore(t, this.nextSibling);
});
关于javascript - d3.js - 如何插入新的同级元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13029571/