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。