【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序
来源:互联网 发布:达内java资源 编辑:程序博客网 时间:2024/05/16 09:35
data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序。在数据需要更新的时候常常会用到。
默认的情况下,data()函数是按照索引号依次绑定数组各项的。第0个元素绑定数组的第0项,第1个元素绑定数组的第1项,依此类推。也可以不按照此顺序进行绑定,这就要用到data()的第二个参数。这个参数是一个函数,称为键函数(key function)。
要注意,只有在选择集原来已经绑定有数据的情况下,才能使用键函数指定绑定的顺序。请看以下代码:
<body><!-- 三个空的p元素 --><p></p><p></p><p></p><script>//数据var persons = [{ id: 3 , name:"张三" },{ id: 6 , name:"李四" }, { id: 9 , name:"王五" }];//选择body中的所有的p元素var p = d3.select("body").selectAll("p");//绑定数据,并修改p元素的内容p.data(persons) .text(function(d){ return d.id + " : " + d.name; });</script></body>
这段代码对p元素的内容进行了修改,修改之后的p元素为:
<p>3 : 张三</p><p>6 : 李四</p><p>9 : 王五</p>
下面将persons里的数据更新,再绑定一次数据。本次绑定添加键函数:
//更新persons里的数据persons = [ { id: 6 , name:"张三" }, { id: 9 , name:"李四" }, { id: 3 , name:"王五" }];//根据键函数的规则绑定数据,并修改内容p.data(persons, function(d){ return d.id; }).text(function(d){return d.id + " : " + d.name;});
键函数里只有一个语句return d.id。表示使用数组项的id属性作为键。使用本次绑定的数据修改p元素的内容后,结果如下:
<p>3 : 王五</p><p>6 : 张三</p><p>9 : 李四</p>
可以看到,结果并没有按照新persons数组的次序(6:张三、9:李四、3:王五)排列。绑定过程如图1所示,绑定的顺序不按照索引号绑定,而是使键值依次对应。
图1
谢谢阅读。
文档信息
- 版权声明:署名(BY)-非商业性(NC)-禁止演绎(ND)
- 发表日期:2015 年 1 月 17 日
- 更多内容:OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
- 备注:本文发表于 OUR D3.JS ,转载请注明出处,谢谢
0 0
- 【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序
- d3.js——选择集与数据的绑定
- 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据
- 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据
- 【 D3.js 选择集与数据详解 — 5 】 处理模板的应用
- d3.js——选择集与数据绑定模板应用
- d3.js-选择集与数据
- 【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板
- d3.js中选择元素和绑定数据
- D3.js学习-选择元素和绑定数据
- d3.js之数据绑定
- 数据可视化与D3.js
- D3.js学习笔记(一)——DOM上的数据绑定
- D3.js学习笔记(二)——使用绑定在DOM上的数据
- D3.js学习笔记(一)——DOM上的数据绑定
- D3.js学习笔记(二)——使用绑定在DOM上的数据
- D3 数据绑定1
- 二 d3.数据绑定
- 数据结构与算法--几种排序的实现(C++)
- mmap详解
- C#窗体程序设计滚动字幕
- 就房管局房管局分过节费
- codeforces 260 div2 virtual Participation
- 【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序
- 漫步IOS--指定比较器
- javaweb学习总结(四十一)——Apache的DBUtils框架学习
- 多维随机变量及其概率分布
- 学习笔记-JS公开课三
- Using Spring 4 WebSocket, sockJS and Stomp support to implement two way server client communication
- RBF核矩阵的实现
- UNIX网络编程中的描述字就绪条件
- Kinect+OpenNI学习笔记之3(获取kinect的数据并在Qt中显示的类的设计)