码迷,mamicode.com
首页 > 其他好文 > 详细

D3 data()

时间:2015-07-08 22:10:45      阅读:194      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!