Question

如果我有这个HTML：

<body>
  <div class="parent">
  </div>
</body>

执行此代码：

d3.select('div')
    .append('span')
    .html("I'm appended to div.parent")

这是我生成的HTML

<body>
  <div class="parent">
    <span>I'm appended to div.parent</span>
  </div>
</body>

但是，如果我执行此代码：

d3.select('div')
    .data([0,1]).enter() // This line of code was added. 
    .append('span')
    .html("I'm appended to document")

span附加到HTML文档。

<body>
  <div class="parent">

  </div>

</body>
<span>I'm appended to document</span>

我知道selectAll()重新定义了父元素，所以我的问题不是为什么第二个语句不起作用，为什么第一个语句不起作用？根据此逻辑，d3.select('div').append('span')不应重新定义父元素并将span附加到文档元素。为什么不是这样？

Answer 1

append方法只是在每个所选元素中添加一些内容，使第一个示例非常直观。

对于第二个示例，您知道enter调用会根据data为每个需要添加的新元素返回一个填充了“占位符”的选择。但“占位符”并非真正解释正在发生的事情。 documentation for .enter()解释说：

考虑进入占位符节点的另一种方法是它们是指向父节点的指针（在本例中是文档正文）;但是，它们只支持追加和插入。一旦插入了元素，它们的索引将反映新的位置，而不一定从零开始或连续。

因此，在这两个示例中，父节点仍然是<body>，原因只是因为您没有链接两个或更多select / selectAll个调用。它们之间的区别在于append - 第一个示例中的选定<div>和第二个示例中的原始选择的父节点。

顺便提一下，谢谢你提出的好问题;它让我更多地思考这些东西的工作方式和原因，而不仅仅是它的作用。