Selections(选择集) enter和exit操作

[suoutsky]

同时选择操作多个dom

d3.selectAll("p").style("color", "white");

动态属性

d3.selectAll("p").style("color", function(d, i) {
	return i % 2 ? "#fff" : "#eee";
});

这种通过匿名函数动态设置属性、样式值的方法常用来绑定数据。数据被定义在一个数组中，并且每一个数据值可以作为这个函数的参数，此外还有索引等参数，比如根据数据值设置不同的字体大小:

d3.selectAll("p")
	.data([4, 8, 15, 16, 23, 42])
    .style("font-size", function(d) { return d + "px"; });

一旦为元素绑定数据之后，后续如果需要操作就不需要重新绑定,D3会搜索已经绑定的数据。也就是可以一次绑定，多次使用。

enter和exit操作

如果数据元素多于DOM个数时用enter，如果数据元素少于DOM元素，则用exit

• 数据元素个数多于DOM元素个数
• 数据元素与DOM元素个数一样
• 数据元素个数少于DOM元素个数