綁定數據之后，選擇集分為三部分：update、enter、exit。這三部分的處理辦法是什么呢？本文將講解其處理方法，以及一個常用的處理模板。
## 1. enter的處理方法
如果沒有足夠的元素，那么處理方法通常是使用append()添加元素。請看下面的代碼：
~~~
<body>
<p></p>
<script>
var dataset = [3, 6, 9];
var p = d3.select("body").selectAll("p");
//綁定數據后，分別獲取update和enter部分
var update = p.data(dataset);
var enter = update.enter();
//update部分的處理方法是直接修改內容
update.text( function(d){ return d; } );
//enter部分的處理方法是添加元素后再修改內容
enter.append("p")
.text(function(d){ return d; });
</script>
</body>
~~~
本例中，body中的p元素只有一個，但是數據有三個，因此enter部分包含多余的兩個數據。對多余數據的處理方法就是append元素，與之對應。經過處理后，body里有三個p元素，內容分別為：
~~~
<p>3</p>
<p>6</p>
<p>9</p>
~~~
通常，從服務器讀取文件后，數據是有的，但是網頁中是沒有元素的。這是D3一個很重要的特性，即可以選擇一個空集，然后使用enter().append()的形式來插入元素。假設現在body里沒有p元素，請看如下代碼：
~~~
var dataset = [10,20,30,40,50];
var body = d3.select("body");
body.selectAll("p") //選擇body中所有p，但由于沒有p，所以選擇了一個空集
.data(dataset) //綁定dataset數組
.enter() //返回enter部分
.append("p") //添加p元素
.text(function(d){ return d; });
~~~
上述代碼中，selectAll選擇了一個空集，然后綁定了數據。由于選擇集為空，那么data()返回的update部分為空。然后調用enter()和append()，使得每一個數據都有元素p與之對應。最后再更改p元素的內容。即enter部分的常見處理方法是使用append()添加元素。
## 2. exit的處理方法
有多出的元素，沒有數據與之對應。對于這樣的元素，通常的做法是使用remove()刪除元素。假設body中有5個p元素，請看如下代碼：
~~~
var dataset = [10, 20, 30];
var p = d3.select("body").selectAll("p");
//綁定數據之后，分別獲取update部分和exit部分
var update = p.data(dataset);
var exit = update.exit();
//update的部分的處理方法是修改內容
update.text( function(d){ return d; } );
//exit部分的處理方法是刪除
exit.remove();
~~~
這段代碼中，對于exit部分的處理方法是刪除。刪除之后，網頁中將不會有多余的p元素。
## 3. 處理模板
經過上兩節的內容，知道了如何處理多余的數據和元素。但是，有時候我們不知道是數據多，還是元素多，或者允許用戶決定誰多誰少。對于事前不知道數組長度或元素數量的問題，可定義一套處理的模板。請看如下代碼：
~~~
var dataset = [10, 20, 30];
var p = d3.select("body").selectAll("p");
//綁定數據后，分別返回update、enter、exit部分
var update = p.data(dataset);
var enter = update.enter();
var exit = update.exit();
//1.update部分的處理方法
update.text( function(d){ return d; } );
//2.enter部分的處理方法
enter.append("p")
.text( function(d){ return d; } );
//3.exit部分的處理方法
exit.remove();
~~~
如此，則不需要考慮網頁中是否有足夠的p元素，或者有多余的p元素，無論是何種情況，最終的結果必定是一個p元素對應數組中的一個項，沒有多余的。這種方法，可稱為有一套處理的**模板**，在數據需要經常更新時很常用。謝謝閱讀。下一篇文章將會講述如何應用該模板。
### 文檔信息
- 版權聲明：署名（BY）-非商業性（NC）-禁止演繹（ND）
- 發表日期：2015 年 1 月 27 日
- 更多內容：[OUR D3.JS - 數據可視化專題站](http://www.ourd3js.com/) 和 [CSDN個人博客](http://blog.csdn.net/lzhlzz)
- 備注：本文發表于 [OUR D3.JS](http://www.ourd3js.com/) ，轉載請注明出處，謝謝
