【 D3.js 选择集与数据详解 — 3 】绑定数据的顺序

时间 2019-12-11

原文原文链接

data() 函数有两个参数，第一个是被绑定数据，第二个参数用于指定绑定的顺序。在数据须要更新的时候经常会用到。javascript

默认的状况下，data()函数是按照索引号依次绑定数组各项的。第0个元素绑定数组的第0项，第1个元素绑定数组的第1项，依此类推。也能够不按照此顺序进行绑定，这就要用到data()的第二个参数。这个参数是一个函数，称为键函数（key function）。java

要注意，只有在选择集原来已经绑定有数据的状况下，才能使用键函数指定绑定的顺序。请看如下代码：数组

<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元素为：wordpress

<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元素的内容后，结果以下：.net

<p>3 : 王五</p>
<p>6 : 张三</p>
<p>9 : 李四</p>

能够看到，结果并无按照新persons数组的次序（6：张3、9：李4、3：王五）排列。绑定过程如图1所示，绑定的顺序不按照索引号绑定，而是使键值依次对应。code

图1blog

谢谢阅读。索引

文档信息

版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）
发表日期：2015 年 1 月 17 日
更多内容：OUR D3.JS - 数据可视化专题站和 CSDN我的博客
备注：本文发表于 OUR D3.JS ，转载请注明出处，谢谢

【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序

文档信息

【 D3.js 选择集与数据详解 — 3 】绑定数据的顺序