javascript - 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);       
});​