【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序
2015-01-17 19:30
225 查看
data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序。在数据需要更新的时候常常会用到。
默认的情况下,data()函数是按照索引号依次绑定数组各项的。第0个元素绑定数组的第0项,第1个元素绑定数组的第1项,依此类推。也可以不按照此顺序进行绑定,这就要用到data()的第二个参数。这个参数是一个函数,称为键函数(key function)。
要注意,只有在选择集原来已经绑定有数据的情况下,才能使用键函数指定绑定的顺序。请看以下代码:
图1
谢谢阅读。
发表日期:2015 年 1 月 17 日
更多内容:OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
备注:本文发表于 OUR D3.JS ,转载请注明出处,谢谢
默认的情况下,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 ,转载请注明出处,谢谢
相关文章推荐
- 【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序
- 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据
- 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据
- 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据
- 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据
- 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据
- 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据
- 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据
- 【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板
- 【 D3.js 选择集与数据详解 — 5 】 处理模板的应用
- 【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板
- 【 D3.js 入门系列 — 2 】 绑定数据和选择元素
- d3.js中选择元素和绑定数据
- 【 D3.js 选择集与数据详解 — 5 】 处理模板的应用
- ASP.Net 数据绑定之-----选择合适的数据控件
- 常用数据绑定控件详解
- WPF数据绑定详解
- DropDownList数据绑定,默认显示请选择
- WinForm的数据绑定详解
- WPF/Silverlight2.0 Binding(数据绑定)机制详解