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.
下篇继续记录