0

所以我有一些 d3 的 javascript 代码，我需要一些帮助。所以在我的主 html 文件中，我声明了这个画布：

然后在另一个文件中我有这些命令：

  var canvas = d3.select("#canvas")

  var data_var=get_data();

  var selection=canvas.selectAll("circle")
                .data(data_var)

  selection.enter().append("circle")

我的问题是当 canvas.selectAll("circle") 被调用时，那个 "circle" 是从哪里来的？我查看了其他地方，给定的画布和输入数据都有任何名为“圆形”的类型。

4

1 回答 1

1

这是 d3 的棘手之处。它的 API 使用声明式，而不是命令式编程范式。用创作者 Mike Bostock 的话来说，这意味着你“告诉 d3 你想要什么，而不是做什么”。因此，当您编写 d3.selectAll("circle") 时，您所做的是告诉 d3，“好的，准备好，我要在此处添加一些 svg 圆圈，所以继续选择它们”。

实际上，它比这更复杂一些。如果您的 DOM 中已经有一些圆圈，它将选择data数组中的尽可能多的圆圈，然后在您调用enter().append("circle"). 但是，如果 DOM 上没有圆圈（创建新图表时通常是这种情况），d3 会选择尚不存在的圆圈。只有当您调用 .data().enter().append("circle") 时，d3 才会将这些选定的圆圈放在 DOM 上。

如果您以前从未使用过声明式接口（我在 d3 之前没有使用过），那么这是一个棘手的概念。以下是一些对我有帮助的资源：

http://bost.ocks.org/mike/join/

http://alignedleft.com/tutorials/d3/binding-data/ （请参阅“请做出选择”部分）

于 2012-11-01T10:36:34.360 回答