【 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 】綁定數據的順序