d3、javascript 和画布

Question

所以我有一些 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”是从哪里来的？我查看了其他地方，给定的画布和输入数据都有任何名为“圆形”的类型。

Answer 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/（请参阅“请做出选择”部分）