D3 data()

与datum()的区别

假设要绑定的数组为[3,6,9]，那么我们希望第一个p元素绑定3，第二个绑定6，第三个绑定9。这种情况就需要使用data()函数，如果使用datum()，则会将数组本身绑定到各元素上，即第一个p元素绑定[3,6,9]，第二个绑定[3,6,9]，第三个也是绑定[3,6,9]。

 

借用：http://www.ourd3js.com/wordpress/?p=797 的图

data()函数返回一个对象，对象里包含update部分和两个函数。一个是enter()函数，返回enter部分，还有update属性，一个是exit()函数，返回exit部分。

 

data()的第二个参数：键函数

http://www.ourd3js.com/wordpress/?p=811 讲的很详细

绑定的顺序不按照索引号绑定，而是使键值依次对应。数据更新时会有用。

 

enter的处理方法

场景：数据多，元素少。

append()添加元素

 

exit的处理方法

场景：数据少，元素多。

remove()删除元素

 

一套处理的模板：结果是，能保证一个数据对应一个元素。

var dataset = [10, 20, 30];

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

		

//绑定数据后，分别返回update、enter、exit部分

var update = p.data(dataset);

var enter = update.enter();

var exit = update.exit();



//1.update部分的处理方法

update.text( function(d){ return d; } );



//2.enter部分的处理方法

enter.append("p")

	.text( function(d){ return d; } );



//3.exit部分的处理方法

exit.remove();