選擇集和數據的關系是 D3 最重要的基礎，在【[入門 - 第 7 章](http://www.ourd3js.com/wordpress/?p=149)】時進行過些許講解，對于要掌握好 D3 是遠遠不夠的。故此開設一個新的分類，專門討論選擇集與數據的關系，包括數據綁定的使用和工作原理，update 、enter、exit 的原理和使用方法等，接下來一段時間里會有多篇此類文章。
D3 最大的特色就是能夠將數據綁定到DOM上。使用select或selectAll選擇元素之后，被選擇的元素上是沒有數據的。數據綁定就是使被選擇元素里包含有數據。與此相關的函數有兩個：
- datum()：將指定數據賦值給被選擇元素。
- data()：將數據數組與選擇集的元素結合。
上面的概念可能難以理解，不要著急，接下來依次剖析datum()和data()，來看看數據綁定是如何工作的，它們又有什么不同之處。雖然不理解原理也可直接使用這兩個函數，但遇到意料之外的結果時往往會不知道如何調試，無從下手，因此大致知道其工作過程是必要的。
## datum()的工作過程
datum() 綁定數據的方法很簡單，在 D3 中使用較少，但能幫助你理解數據 D3 是如何綁定數據的。請先看下面的代碼：
~~~
<body>
<!-- 三個段落元素 -->
<p>Fire</p>
<p>Water</p>
<p>Wind</p>
<script>
//選擇body中所有的p元素，選擇集結果賦值給變量p
var p = d3.select("body").selectAll("p");
//綁定數值7到選擇集上
p.datum(7);
//在控制臺輸出選擇集
console.log(p);
</script>
</body>
~~~
這段代碼中，使用datum()將數值7綁定到了選擇集上，然后在控制臺輸出該選擇集。在瀏覽器的控制臺中，可以看到如圖1所示的輸出結果。其中包含有三個p元素，正是使用selectAll選擇的三個段落，還可看到選擇集的大小（length）、父節點（parentNode）等信息。
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2015/01/4-4-1.png)
圖1
展開任意一個p元素，其各屬性如圖2所示。可以看到，經過綁定之后，多出了一個__data__屬性，其數值7正是剛才綁定的數據。展開其他的p元素，會發現每一個元素中都多出了一個__data__，并且數值都是7。
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2015/01/4-4-2.png)
圖2
那么datum()的工作過程就再明了不過了，即對于選擇集中的每一個元素，都為其增加一個__data__屬性，屬性值為datum(value)的參數value。此處的value并非一定要是number（數值）型，也可以是string（字符串）、boolean（布爾型）和object（對象），無論是什么類型，其工作過程都是給__data__賦值。如果使用undefined和null作為參數，則將不會創建__data__屬性。下面來看看datum()的源代碼：
~~~
d3_selectionPrototype.datum = function(value) {
return arguments.length
? this.property("__data__", value)
: this.property("__data__");
};
~~~
由上面的源代碼可以知道，其實datum()是用D3的property()函數實現的：如果有參數value，則調用property給當前對象添加一個__data__屬性，否則返回__data__屬性值。下面來試驗一下沒有參數的情形：
~~~
var p = d3.select("body").selectAll("p");
p.datum(7);
console.log( p.datum() ); //在控制臺輸出被綁定的數據
~~~
這段代碼將在控制臺輸出數字7，正是被綁定的數據。現有有一個問題，數據被綁定在選擇集上后，該如何使用呢，或者說D3希望我們如何使用呢。下面舉一個例子，使用被綁定的字符串，替換掉原字符串：
~~~
<body>
<p>Fire</p>
<p>Water</p>
<p>Wind</p>
<script>
var p = d3.select("body").selectAll("p");
p.datum("Thunder") //綁定字符串Thunder到選擇集上
.text(function(d,i){ //替換內容
return d + " " + i;
});
</script>
</body>
~~~
這段代碼中，使用datum()綁定了一個字符串Thunder到選擇集上，然后調用text()替換字符串。text()用于設置或獲取被選擇元素的文本。text()的參數是一個無名函數function(d,i)，這兩個參數分別代表數據（datum）和索引（index）。這兩個參數的名稱也可以不使用d和i，但意義是不變的。在D3中，建議寫成d和i。最后，在這個無名函數里返回了由d和i結合而成的字符串，中間加一空格。結果如圖3所示，網頁中的三個段落元素p的字符串被替換成：Thunder?0、Thunder?1、Thunder?2。
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2015/01/4-4-3.png)
圖3
由結果可知，無名函數的兩個參數d和i，d表示被綁定的數據，i表示的索引號是從0開始的。在D3中使用被綁定的數據都是使用上述形式，即定義一個無名函數function(d,i)，然后在函數的實現中使用d和i。D3還有一個特性，能使被綁定的數據傳遞給子元素。對前一段代碼稍作修改：
~~~
p.datum("Thunder")
.append("span") //在每一個被選擇元素后添加元素span
.text(function(d,i){
return " " + d;
});
~~~
結果如圖4所示，各段落元素的末尾被添加了span元素，內容為Thunder。
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2015/01/4-4-4.png)
圖4
下面使用console.log在控制臺輸出選擇集p，輸出結果如圖5所示。可以看到，子元素span里也含有屬性__data__，屬性值也是字符串Thunder。于是可以得出一個結論：在被綁定數據的選擇集中添加元素后，新元素也會具有被綁定數據。
[](http://www.ourd3js.com/wordpress/wp-content/uploads/2015/01/4-4-5.png)
圖5
下一章講述詳細講述 data() 的工作過程，謝謝閱讀。
### 文檔信息
- 版權聲明：署名（BY）-非商業性（NC）-禁止演繹（ND）
- 發表日期：2015 年 1 月 12?日
- 更多內容：[OUR D3.JS - 數據可視化專題站](http://www.ourd3js.com/) 和 [CSDN個人博客](http://blog.csdn.net/lzhlzz)
- 備注：本文發表于 [OUR D3.JS](http://www.ourd3js.com/) ，轉載請注明出處，謝謝
