【 D3.js 選擇集與數據詳解 — 2 】使用data()綁定數據

時間 2019-12-07

標籤 d3.js 選擇數據詳解使用 data 綁定欄目 JavaScript 简体版

原文原文鏈接

D3 中綁定數據大可能是由 data() 函數來完成的，它是怎樣工做的，它與 datum() 有什麼區別呢？javascript

data()函數可以將數組各項分別綁定到各元素上，並且可以設置綁定的規則。data()還可以處理數組長度與元素數量不一致的狀況。當數組長度大於元素數量，能爲多餘數據預留元素位置，以便未來插入新元素；當數組長度小於元素數量時，能提供指向多餘元素的方法，以便未來刪除。下面來剖析data()是如何綁定數據的，相比datum()有哪些新功能。java

data()的工做過程

假設body中有三個段落元素p，HTML代碼以下：數組

<body>
<p>Lion</p>
<p>Tiger</p>
<p>Leopard</p>
</body>

要將一個數組的各項分別綁定到各元素上，假設要綁定的數組爲[3,6,9]，那麼咱們但願第一個p元素綁定3，第二個綁定6，第三個綁定9。這種狀況就須要使用data()函數，若是使用datum()，則會將數組自己綁定到各元素上，即第一個p元素綁定[3,6,9]，第二個綁定[3,6,9]，第三個也是綁定[3,6,9]，其區別如圖1所示。wordpress

圖1函數

使用data()綁定數據的代碼以下：.net

//定義數組
var dataset = [3, 6, 9];

//選擇body中的p元素
var p = d3.select("body").selectAll("p");

//綁定數據到選擇集
var update = p.data(dataset);

//輸出綁定的結果
console.log(update);

這段代碼中，將數組綁定到選擇集並輸出結果。如圖2所示，數組的三項分別被綁定到了個元素上，與圖2的預測一致。

圖2code

上例中，數組長度與元素數量正好相等。二者也有不相等的狀況，若是數組長度爲5，而元素數量爲3，則多出2個數據沒有綁定元素。若是數組長度爲1，元素數量爲3，則會有2個元素沒有綁定數據。在D3中，根據數組長度和元素數量的關係，分別把各類狀況稱爲：對象

update：數組長度 = 元素數量
enter：數組長度 > 元素數量
exit：數組長度 < 元素數量

這三個單詞的含義可能很難理解，update的原意爲「更新」，enter的原意爲「進入」，exit的原意爲「退出」，直譯的結果很難表現所需的意思。其實，在數據可視化中，手中的數據一般都是要進行可視化的，而沒有綁定數據的元素是沒有用的。那麼對於這三個單詞，咱們能夠理解爲：若是數組長度大於元素數量，則多餘的數組項「即將進入可視化（enter）」；若是數組長度小於元素數量，則多餘的元素「即將退出可視化（exit）」；若是數組長度等於元素數量，元素上的數據「獲得了更新（update）」。blog

仍是很難理解嗎？不要緊，請看圖3。其中，左圖表示數組長度爲五、元素數量爲3的狀況，那麼有兩個數組項沒有與之相連的元素，這一部分被稱爲enter。右圖表示數組長度爲一、元素數量爲3的狀況，那麼有兩個元素沒有數組項與之相連，這一部分稱爲exit。數組項和元素相連的部分被稱爲update。ip

圖3

data()函數返回一個對象，對象裏包含update部分和兩個函數。一個是enter()函數，返回enter部分，一個是exit()函數，返回exit部分。請看以下代碼：

var dataset = [3, 6, 9, 12, 15];
var p = d3.select("body").selectAll("p");
var update = p.data(dataset);
console.log(update);
console.log(update.enter());
console.log(update.exit());

這段代碼中，數組長度爲5，元素數量爲3，多出兩個數組項。其輸出結果如圖4和5所示。