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 ，转载请注明出处，谢谢
【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序的更多相关文章
-
【 D3.js 选择集与数据详解 — 5 】 处理模板的应用
在[选择集与数据 - 4]一文中,介绍了一个update.enter.exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法. 1. 模板 复习一下上一章提到的模板. //绑定数据后, ...
-
【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板
绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法 如果没有足够的元素,那么处理 ...
-
【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据
D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够 ...
-
【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据
选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理, ...
-
002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据
一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...
-
D3.js 选择元素和绑定数据/使用数据
选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...
-
MySQL数据库使用mysqldump导出数据详解
mysqldump是mysql用于转存储数据库的实用程序.它主要产生一个SQL脚本,其中包含从头重新创建数据库所必需的命令CREATE TABLE INSERT等.接下来通过本文给大家介绍MySQL数 ...
-
微信JS接口汇总及使用详解
这篇文章主要介绍了微信JS接口汇总及使用详解,十分的全面.详尽,包含分享到朋友圈,分享给朋友,分享到QQ,拍照或从手机相册中选图,识别音频并返回识别结果,使用微信内置地图查看位置等接口,有需要的小伙伴 ...
-
Apache + Tomcat集群配置详解 （1）
一.软件准备 Apache 2.2 : http://httpd.apache.org/download.cgi,下载msi安装程序,选择no ssl版本 Tomcat 6.0 : http://to ...
随机推荐
-
SSH配置与讲解
一.Struts 首先介绍Struts,在web项目中加入Struts的jar包,并在Web.xml中添加Struts的配置: <filter> <filter-name ...
-
通过 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）
我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配 ...
-
tomcat7/8 启用调试模式，可进行远程调试
tomcat7,和 tomcat6 的jpda 不一样,tomcat7已经把jpda配置的属性在catalina.sh/catalina.bat里面已经写好了,我们不需要向tomcat6那样去设置参数 ...
-
java连接hbase报错
报错信息如下: The node /hbase is not in ZooKeeper. It should have been written by the master. Check the va ...
-
1025WHERE执行顺序以及MySQL查询优化器
转自http://blog.csdn.net/zhanyan_x/article/details/25294539 -- WHERE执行顺序-- 过滤比较多的放在前面,然后更加容易匹配,从左到右进行执 ...
-
VS 2008 创建MFC程序对话框的步骤
用过不少编程语言,可是刚开始学的时候最容易忘记一些简单的流程或者生疏了.那么这里就说说VS 2008 创建MFC程序对话框的步骤.我主要是android开发方面的.平时使用jni调用不少c++代码.所 ...
-
UWP开发入门（十二）——神器Live Visual Tree
很久以前,我们就有Snoop这样的工具实时修改.查看正在运行的WPF程序,那时候调个样式,修改个模板,相当滋润.随着历史的车轮陷进WP的泥潭中,无论WP7的Silverlight还是WP8.1的run ...
-
Vmdk文件如何使用，vmdk导入虚拟机VMware8.0教程
一.打开虚拟机VMware Workstation8.0,点击新建虚拟机. 二.进入虚拟机向导,选择自定义. 三.这里保持默认即可. 四.这里选择“我以后安装操作系统”. 五.这里选择Windows ...
-
[笔记]A*寻路算法初探
写在开始之前 最近突然对各路游戏的寻路算法很感兴趣,于是去学习了下游戏里的AI们是如何寻路的.网上相关内容很多,但同时有些说法也不一,制作自己的A* 算法时也有因不同的说法而困惑.整理多方资料并自己实 ...
-
python学习 day13 装饰器(一)&;推导式
装饰器&推导式 传参位置参数在前,关键词参数在后 函数不被调用内部代码不被执行 函数在被调用的时候,每次都会开辟一个新的内存地址,互不干扰 #经典案例 def func(num): def i ...