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

你在selectAll()通话之前拨打的电话.data()真的很重要,只要你改变/更新显示的内容.想象一下,你已经有了很多圈子,你想改变他们的位置.坐标由数据决定,所以最初你会做类似的事情

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).这样你就不需要再次附加圆圈了(毕竟它们已经存在),但只更新它们的坐标.

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

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