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

我有新的兄弟姐妹插入现有元素的问题。

我有这个结构

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

有任何想法吗?

首先,值得注意的是,insert函数中的第二个参数是before selector。此外,链接操作对左手结果起作用。

所以你做完了

// 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);       
});​
http://stackoverflow.com/questions/13029571/d3-js-how-to-insert-new-sibling-elements

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – d3.js – 如何插入新的兄弟元素