D3.js: 追加后获取parentNode

Question

我想将循环中的元素附加到 "root"-div，然后返回 DOM-树以附加另一个元素/设置文本（在D3.js).

所需结构：

root > div > div 
           > text
     > div > div
           > text
     > ...

代码：

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js">
  
  for (var i = 0; i < 10; i++) {
    d3.select("#root")
      .append("div")
        .append("div")
        .parentNode
      .text("text");
  }
  
</script>

错误信息：

[...].parentNode is undefined

D3 中有没有办法在追加元素后上树？

Answer 1

我假设你上面的代码只是为了说明，因为它可以写成：

d3.select("#root")
    .append("div")
    .text("text")
    .append("div");

也就是说，您可以使用：

var div = d3.select("#root")
    .append("div")
    .append("div")
    .select(function(){
      return this.parentNode;
    })
   .text("text");

问题是 .text 将覆盖子 div。

所以，要避免这种情况如何：

var div = d3.select("#root")
    .append("div")
    .append("div")
    .select(function(){
      return this.parentNode;
    })
   .insert("span","div")
   .text("text");

示例 here.

D3.js: 追加后获取parentNode

D3.js: Get parentNode after append

dom

structure

append

d3.js