4

我是 d3 的新手，我正在使用 Scott Murray 的“Web 交互式数据可视化”（顺便说一句）来帮助我入门。现在，到目前为止，我所看到的一切都按描述工作，但是在查看创建新元素的过程时，有些事情让我感到困惑。简单示例（来自 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 或对象结构中的任何地方找到此条目。

谢谢你让我解惑。

4

1 回答 1

5

只有在您更改/更新显示的内容时，您在调用之前放入的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。这样做是一种很好的做法，但只是为了弄清楚您要做什么并避免意外选择其他元素的问题。

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

于 2013-07-26T08:54:37.153 回答