Javascript select（）.append（）和select（）.data（）.enter（）.append（）之间的差异？_Javascript_D3.js

Javascript select（）.append（）和select（）.data（）.enter（）.append（）之间的差异？

javascript d3.js

Javascript select（）.append（）和select（）.data（）.enter（）.append（）之间的差异？,javascript,d3.js,Javascript,D3.js,如果我有这个HTML： <body> <div class="parent"> </div> </body> 这是我生成的HTML <body> <div class="parent"> <span>I'm appended to div.parent</span> </div> </body> span将附加到HTML文档中 <body>

如果我有这个HTML：

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

这是我生成的HTML

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

span

将附加到HTML文档中

<body>
  <div class="parent">

  </div>

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


我被附在文件后面

我知道

selectAll（）

重新定义了父元素，所以我的问题不是为什么第二条语句不起作用，而是为什么第一条语句起作用？根据此逻辑，

d3.select（'div'）.append（'span'）

不应重新定义父元素并将

span

附加到文档元素。为什么不是这样

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

对于第二个示例，您知道，

enter

调用返回一个选择，该选择中为每个需要基于

数据添加的新元素填充了“占位符”。但“占位符”并不能真正解释发生了什么。报告解释说：
考虑输入占位符节点的另一种方式是，它们是指向父节点（在本例中为文档体）的指针；但是，它们只支持追加和插入。一旦插入元素，其指数将反映新的位置，不一定从零开始或连续
因此，在这两个示例中，父节点仍然是
，这仅仅是因为您没有链接两个或多个select
/selectAll
调用。它们之间的区别在于，第一个示例中的所选
和第二个示例中的原始选择的父节点所附加的内容
顺便说一句，谢谢你的好问题；它让我更多地思考这个东西是如何工作的，为什么工作的，而不仅仅是它的功能。
这个.data（[0,1]）
。enter似乎不是一个标准的jquery方法（除非我完全找不到它）。@MarcB这不是jquery，这是d3.js。也许这有帮助：还值得指出的是，你只得到一个长度为2的数组的新元素，因为第一个元素与你调用的.data（）上的选择中的一个元素匹配。
d3.select('div')
    .data([0,1]).enter() // This line of code was added. 
    .append('span')
    .html("I'm appended to document")

<body>
  <div class="parent">

  </div>

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