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

谢谢阅读。

文档信息

【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序的更多相关文章

  1. 【 D3.js 选择集与数据详解 — 5 】 处理模板的应用

    在[选择集与数据 - 4]一文中,介绍了一个update.enter.exit的处理模板,这个模板很常用,本文将通过一个例子来讲解其使用方法. 1. 模板 复习一下上一章提到的模板. //绑定数据后, ...

  2. 【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

    绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法 如果没有足够的元素,那么处理 ...

  3. 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

    D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够 ...

  4. 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据

    选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理, ...

  5. 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据

    一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...

  6. D3.js 选择元素和绑定数据/使用数据

    选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...

  7. MySQL数据库使用mysqldump导出数据详解

    mysqldump是mysql用于转存储数据库的实用程序.它主要产生一个SQL脚本,其中包含从头重新创建数据库所必需的命令CREATE TABLE INSERT等.接下来通过本文给大家介绍MySQL数 ...

  8. 微信JS接口汇总及使用详解

    这篇文章主要介绍了微信JS接口汇总及使用详解,十分的全面.详尽,包含分享到朋友圈,分享给朋友,分享到QQ,拍照或从手机相册中选图,识别音频并返回识别结果,使用微信内置地图查看位置等接口,有需要的小伙伴 ...

  9. Apache + Tomcat集群配置详解 （1）

    一.软件准备 Apache 2.2 : http://httpd.apache.org/download.cgi,下载msi安装程序,选择no ssl版本 Tomcat 6.0 : http://to ...

随机推荐

  1. c# DataTable 中 Select 和 Clone 用法结合

    C# DataTable是存放数据的一个离线数据库,将数据一下加载到内存. DataTable.Select ()方法: Select();//全部查出来    Select(过滤条件);//根据过滤 ...

  2. KMP(匹配)

    Description 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Input 输入中含有一些数据, ...

  3. STL标准模板库 向量容器（vector）

    向量容器使用动态数组存储.管理对象.因为数组是一个随机访问数据结构,所以可以随机访问向量中的元素.在数组中间或是开始处插入一个元素是费时的,特别是在数组非常大的时候更是如此.然而在数组末端插入元素却很 ...

  4. 字符设备驱动、平台设备驱动、设备驱动模型、sysfs的比较和关联

    转载自:http://www.kancloud.cn/yueqian_scut/emlinux/106829 学习Linux设备驱动开发的过程中自然会遇到字符设备驱动.平台设备驱动.设备驱动模型和sy ...

  5. leetcode problem 33 -- Search in Rotated Sorted Array

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...

  6. trigger

    trigger() 方法触发被选元素的指定事件 <html><head><script type="text/javascript" src=&quo ...

  7. (转)HTTP协议(3)

    一.概念 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,超文本传输协议(HTTP)是一种通信协议,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器. ...

  8. 转:jQuery.fn.extend与jQuery.extend到底区别在哪？

    还是先吐个槽,网上都都是转载抄袭,基本上就那么一两篇文章,说的还不清楚.... 正文: 其实说白了,从两个方法本身就能看出来端倪. 我们先把jQuery看成了一个类,这样好理解一些. jQuery.e ...

  9. Java学习--Equals与“==”

    在Java规范中,它对equals()方法的使用必须要遵循如下几个规则: equals 方法在非空对象引用上实现相等关系: 1.自反性:对于任何非空引用值 x,x.equals(x) 都应返回 tru ...

  10. 【springmvc Request】 springmvc请求接收参数的几种方法

    通过@PathVariabl注解获取路径中传递参数 转载请注明出处:springmvc请求接收参数的几种方法 代码下载地址:http://www.zuida@ima@com/share/1751862 ...