d3，javascript和canvasing

Question

所以我有一些javascript代码与d3，我需要一些帮助。所以在我的主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（“圆”）被称为，那个“圈子”从哪里来？我查看了其他地方，给定的画布和输入数据都有任何类型的“圈子”。

Answer 1

这是关于D3的棘手的事情。它的API使用声明式，而不是命令式编程范例。在创造者迈克·博斯托克的话中，这意味着你“告诉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/（见“请让你的选择”一节）