d3.js - 如何插入新的兄弟元素

Question

我有一个问题,即将新兄弟插入现有元素.

我有这个结构

<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>

有任何想法吗？

Answer 1

首先,值得注意的是insert函数中的第二个参数是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);       
});?