dom - D3.js:追加后获取parentNode

Question

我想将循环中的元素 append 到“root”-div，然后返回 DOM 树以 append 另一个元素/设置文本(在 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 .