首页 > 其他 > 详细

D3 data()

时间:2015-07-08 22:09:04      阅读:292      评论:0      收藏:0      [点我收藏+]

与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();

  

 

D3 data()

原文:http://www.cnblogs.com/wang-jing/p/4631282.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!