javascript - select()。append()和select()。data()。enter()。append()之间的区别？

如果我有这个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附加到document元素。为什么不是这样？

最佳答案

append方法只是在每个选定元素内添加了一些内容，使第一个示例相当直观。

对于第二个示例，您知道enter调用将为每个需要基于data添加的新元素返回一个填充有“占位符”的选择。但是“占位符”并不能真正解释正在发生的事情。 documentation for .enter() 解释:

因此，在两个示例中，父节点仍然是<body>，仅仅是因为您尚未链接两个或更多select / selectAll调用。它们之间的区别是append编码到的内容-在第一个示例中为选定的<div>，在第二个示例中为原始选择的父节点。

顺便说一句，谢谢你的提问。它使我更多地考虑了这些东西的工作方式和原因，而不仅仅是它的工作方式。