d3：创建新元素时对selectAll（）的困惑

Question

我是d3的新手，正在使用Scott Murray的“互动数据可视化网络”（这很棒），让我开始。 现在我所看到的所有内容都按照描述的方式工作，但在查看创建新元素的过程时，让我感到困惑。 简单的例子（来自Scott Murray）：

svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle");

名称"circle"用于selectAll ，它返回一个空选择（这是我学到的）。 然后通过将相同的名称放入.append来附加圆圈。 大！

现在让我感到困惑的是，当你想再次做同样的事情时会发生什么。 所以你有第二个数据集，并希望以相同的方式生成新的圆圈。 使用相同的代码只是替换数据集显然不起作用，因为selectAll("circle")将不再返回空选择。 所以我玩了一遍，发现我可以在selectAll使用任何名称，甚至将它留空如下： selectAll()

Scott Murrays示例始终只使用每个数据集的一种类型（圆形，文本等）。 最后我在官方的例子中找到了类似的东西

svg.selectAll("line.left")
    .data(dataset)
    .enter()
    .append("line")
    .attr ...

svg.selectAll("line.right")
    .data(dataset)
    .enter()
    .append("line");
    .attr ...

现在我的问题是： selectAll("ENTRY")这个条目是如何使用的？ 以后可以用它来再次以任何方式引用这些元素，或者它真的只是一个虚拟名称，可以以任何方式选择并只需要返回一个空选择？ 我无法在生成的DOM或对象结构中的任何位置找到此条目。

谢谢你让我困惑。

Answer 1

在调用.data()之前，您在selectAll()调用中放入的内容实际上只对您更改/更新显示的内容非常重要。 想象一下，你已经有了很多圈子，你想改变他们的位置。 坐标由数据决定，所以最初你会做类似的事情

svg.selectAll("circle")
   .data(data)
   .enter()
   .append("circle")
   .attr("cx", function(d) { return d; })
   .attr("cy", function(d) { return d; });

现在，您的新数据具有相同数量的元素，但坐标不同。 要更新圆圈位置，您需要做的就是

svg.selectAll("circle")
   .data(newData)
   .attr("cx", function(d) { return d; })
   .attr("cy", function(d) { return d; });

会发生什么是D3将newData中的元素与现有圆圈（您在selectAll选择的内容）相匹配。 这样你就不需要再次附加圆圈了（毕竟它们已经存在），但只更新它们的坐标。

请注意，在第一次调用中，您在技术上不需要选择circle 。 这样做是好的做法，只是为了弄清楚你想要做什么，并避免意外选择其他元素的问题。

例如，您可以在此处找到有关此更新模式的更多信息。