与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();
时间: 2024-10-11 16:44:14