select - 使用 d3.js 时，为什么在将新元素附加到条目选择时必须在 select 之后调用 selectAll？

Question

假设我们有一个没有子节点的 svg 元素:

<svg id="bargraph" width="400" height="90" ></svg>

假设我们还有一个数据数组:

var data = [10,20,30,40,50];

此代码正确地将新的 rect 元素附加到 svg 元素。

 d3.select("#bargraph")
 .selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("height", 10)
 .attr("width", function(d) { return d; })
 .attr("x", 0)
 .attr("y", function (d, i) { return i * 20; })
 .attr("fill", "blue");

下面的代码 不将新的 rect 元素附加到 svg 元素。你能告诉我为什么吗？

 d3.selectAll("#bargraph rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("height", 10)
 .attr("width", function(d) { return d; })
 .attr("x", 0)
 .attr("y", function (d, i) { return i * 20; })
 .attr("fill", "blue");

Answer 1

每当您附加元素时，D3 都会将它们附加到选定的父元素。您不是在选择父元素，而是仅选择具有指定父元素的元素。

在您的示例中，您选择了所有 rect有一个 ID 为 bargraph 的父级，而您可以通过以下方式成功更新这些节点:

d3.selectAll(#bargraph rect).data(data).attr(...)

但是，使用以下内容不会将项目附加到 #bargraph (正如你所说):

d3.selectAll("#bargraph rect).data(data).enter()

在这里，D3 将扫描整个文档，即父元素( d3.selectAll() )并返回与选择器条件匹配的每个匹配元素。然后输入选择将为数据数组中不存在的每个元素创建一个占位符节点。这些节点是相对于父元素选择创建的:

Conceptually, the enter selection’s placeholders are pointers to the parent element (documentation)

正如我们可以选择矩形并输入圆形一样，选择器和我们希望输入的元素的类型/位置没有任何联系。

在下面的示例中，我使用 d3.selectAll("svg circle") 选择(并更新)SVG 圆。 ，但我输入了一个 div - 我们可以看到该 div 被附加到父选择的元素，在 d3.selectAll() 的情况下是文档本身，而不是 SVG(而不是正文)，尽管我选择了:

var svg = d3.select("body").append("svg");

svg.append("circle")
  .attr("cx",40)
  .attr("cy",40)
  .attr("r",20)
  .attr("fill","orange");

var circles = d3.selectAll("svg circle")
  .data(["steelblue","yellow"])
  .attr("fill",function(d) { return d; });

circles.enter().append("div")
  .html(function(d) { return d; });
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

好的，但为什么 D3 是这样的？最终，我无法回答为什么，因为这是除我之外的其他人做出的决定的结果。我敢说一些推理可能是这样的:

如果选择器如 (#bargraph rect)确定要输入元素的位置，然后根据选择器可能会有某些挑战:

如果您不想向 ID 为 bargraph 的元素输入元素怎么办- 也许您想在别处输入元素(但仍需要仅选择 ID 为 bargraph 的元素的特定子元素)。

如果您选择了一个类或每个 div/p/etc，新输入的元素将附加到哪个父元素？

如果选择一类元素，您可能希望将 sibling 而不是子元素附加到该类中。

当然，最后两个是关于类而不是 ID，但是无论选择器字符串如何，行为都应该相似(选择器字符串中的 ID、类和元素的不同行为可能会造成混淆)。所选择的方法可能被那些决定的程序员选择为最干净和最清晰的。