d3.js v5版本——数据选择与绑定

1.对于d3想说的

其实d3对于svg的关系就像jquery对于原生js的关系一样。有了d3我们操作svg就会变得方便起来。毫不夸张的说，d3学至化境，一切的网页可视化都不在话下。

2.选择数据

d3中选择数据有两中方式

• select()
• selectAll()

故名思意，select()就是选择某一具体的dom元素，selectAll()就是选择某一类dom元素的集合

var body = d3.select("body")    //选择了body元素
var p1 = body.select("p")    // 选择了第一个p元素
var p2 = body.select("#id_name")    //选择了id为id_name的元素

var p = body.selectAll("p")    // 选择了全部的p元素

其实从上的代码也可以看出d3对与元素的选择也可以时链式的，比如选择p1：

var p1 = d3.select("body").select("p");

3.绑定数据

绑定数据也有两种方式

• data() :将数据集绑定到选择集上，数据各项和选择集各项对应
• datum(): 将一个数据绑定到选择集上

一般常用的是data()。datum()比较简单，就是将数据绑定到选择集的各项元素中。
这里的data()绑定就不是那么简单了。会存在几个疑问

• 当绑定的数据集元素少于选择集元素怎么办？
• 当绑定的数据集元素多与选择集元素怎么办？

这里就需要说到d3中另外3个更重要的概念了：Enter、Update、Exit.
下篇继续记录