D3 data()
2015-07-08 20:44
369 查看
与datum()的区别
借用: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()删除元素
一套处理的模板:结果是,能保证一个数据对应一个元素。
假设要绑定的数组为[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();
相关文章推荐
- 内存管理
- IOS横向菜单(TopBar Menu)代码示例 - XNScrollTopBar
- mfc添加右击事件popmenu
- jquery用Ajax中的回调函数时注意事项
- 内存溢出异常
- 【Java】以给定值x为基准将链表分割成两部分,所有小于x的结点排在大于等于x的结点之前
- ArcGIS Engine 10.0版本如何打开10.1、10.2版本
- PCL点云库(Point Cloud Library
- 关于ScheduledExecutorService执行一段时间之后就不执行的问题
- error C2039: “create”: 不是“cocos2d::GLView”的成员,出错解决办法
- 抓包之安卓app内请求
- error C2039: “create”: 不是“cocos2d::GLView”的成员,出错解决办法 分类: cocos2d代码编写 2015-07-08 20:42 97人阅读 评论(1) 收藏
- 整数排序
- UIScrollView/滚动视图&&UIPageControl/指示行点
- —教训深刻—SQL Server大约TempDB使用
- 最新CSS兼容方案
- 构造器
- 平面点集的凸包
- 尼科彻斯定理
- 南阳oj 题目41 三个数从小到大排序