D3 中綁定數據大多是由 data() 函數來完成的，它是怎樣工作的，它與 datum() 有什么區別呢？
data()函數能夠將數組各項分別綁定到各元素上，而且能夠設置綁定的規則。data()還能夠處理數組長度與元素數量不一致的情況。當數組長度大于元素數量，能為多余數據預留元素位置，以便將來插入新元素；當數組長度小于元素數量時，能提供指向多余元素的方法，以便將來刪除。下面來剖析data()是如何綁定數據的，相比datum()有哪些新功能。
## 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所示。
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2015/01/4-4-61.png)
圖1
使用data()綁定數據的代碼如下：
~~~
//定義數組
var dataset = [3, 6, 9];
//選擇body中的p元素
var p = d3.select("body").selectAll("p");
//綁定數據到選擇集
var update = p.data(dataset);
//輸出綁定的結果
console.log(update);
~~~
這段代碼中，將數組綁定到選擇集并輸出結果。如圖2所示，數組的三項分別被綁定到了個元素上，與圖2的預測一致。[](http://www.ourd3js.com/wordpress/wp-content/uploads/2015/01/4-4-71.png)
圖2
上例中，數組長度與元素數量正好相等。兩者也有不相等的情況，如果數組長度為5，而元素數量為3，則多出2個數據沒有綁定元素。如果數組長度為1，元素數量為3，則會有2個元素沒有綁定數據。在D3中，根據數組長度和元素數量的關系，分別把各種情況稱為：
- update：數組長度?=?元素數量
- enter：數組長度?>?元素數量
- exit：數組長度?<?元素數量
這三個單詞的含義可能很難理解，update的原意為“更新”，enter的原意為“進入”，exit的原意為“退出”，直譯的結果很難表現所需的意思。其實，在數據可視化中，手中的數據通常都是要進行可視化的，而沒有綁定數據的元素是沒有用的。那么對于這三個單詞，我們可以理解為：如果數組長度大于元素數量，則多余的數組項“即將進入可視化（enter）”；如果數組長度小于元素數量，則多余的元素“即將退出可視化（exit）”；如果數組長度等于元素數量，元素上的數據“得到了更新（update）”。
還是很難理解嗎？沒關系，請看圖3。其中，左圖表示數組長度為5、元素數量為3的情況，那么有兩個數組項沒有與之相連的元素，這一部分被稱為enter。右圖表示數組長度為1、元素數量為3的情況，那么有兩個元素沒有數組項與之相連，這一部分稱為exit。數組項和元素相連的部分被稱為update。
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2015/01/4-4-81.png)
圖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所示。
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2015/01/4-4-91.png)
圖4
圖4中，可以看到被綁定數據的三個p元素。還有enter()和exit()兩個函數，用于返回本次綁定中enter和exit部分。
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2015/01/4-4-101.png)
圖5
圖5中，可以看到enter部分中，D3已經為多余的數組項12和15預留了位置，用于將來的操作。enter部分中還有一個update變量，指向update部分。本次綁定中，沒有多余的元素，所以exit中沒有內容。如果將數組換成：
~~~
var dataset = [3];
~~~
則exit部分的輸出結果如圖6所示，可以看到多出的兩個p元素。
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2015/01/4-4-111.png)
圖6
謝謝閱讀。
### 文檔信息
- 版權聲明：署名（BY）-非商業性（NC）-禁止演繹（ND）
- 發表日期：2015 年 1 月 17 日
- 更多內容：[OUR D3.JS - 數據可視化專題站](http://www.ourd3js.com/) 和 [CSDN個人博客](http://blog.csdn.net/lzhlzz)
- 備注：本文發表于 [OUR D3.JS](http://www.ourd3js.com/) ，轉載請注明出處，謝謝
