在【[選擇集與數據 - 4](http://www.ourd3js.com/wordpress/?p=822)】一文中，介紹了一個update、enter、exit的處理模板，這個模板很常用，本文將通過一個例子來講解其使用方法。
## 1. 模板
復習一下上一章提到的模板。
~~~
//綁定數據后，分別返回update、enter、exit部分
var update = selection.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();
~~~
## 2. 應用模板的場合
當數據需要更新（添加、刪除、變更）的時候，要想起此模板。
## 3. 應該該模板的柱形圖
下面制作一個柱形圖，用于理解更新數據與使用該模板的好處。柱形圖的數據有時候需要更新，更新后柱形圖也需要跟著變化。例如將數據排序、增加新的數據等，都需要柱形圖跟著變化。在這里只繪制柱形圖的矩形和文字，不繪制坐標軸，然后再添加兩個按鈕，用于更新數據。將繪制圖形的代碼寫在一個函數draw()里，當數據發生更新時，再次調用此函數即可。
~~~
function draw(){
//獲取矩形的update部分
var updateRect = svg.selectAll("rect")
.data(dataset);
//獲取矩形的enter部分
var enterRect = updateRect.enter();
//獲取矩形的exit部分
var exitRect = updateRect.exit();
//1. 矩形的update部分的處理方法
//2. 矩形的enter部分的處理方法
//3. 矩形的exit部分的處理方法
//獲取文字的update部分
var updateText = svg.selectAll("text")
.data(dataset);
//獲取文字的enter部分
var enterText = updateText.enter();
//獲取文字的exit部分
var exitText = updateText.exit();
//1. 文字的update部分的處理方法
//2. 文字的enter部分的處理方法
//3. 文字的exit部分的處理方法
}
~~~
上述模板中，分別獲取矩形和文字的update、enter、exit三個部分。然后再分別對三個部分進行相應的處理。下面以矩形為例，來講解怎么樣分別處理。代碼如下：
~~~
//1. 矩形的update部分的處理方法
updateRect.attr("fill","steelblue") //設置顏色為steelblue
.attr("x", function(d,i){ //設置矩形的x坐標
return padding.left + i * rectStep;
})
.attr("y", function(d){ //設置矩形的y坐標
return height- padding.bottom - d;
})
.attr("width",rectWidth) //設置矩形的寬度
.attr("height",function(d){ //設置矩形的高度
return d;
});
//2. 矩形的enter部分的處理方法
enterRect.append("rect")
.attr("fill","steelblue") //設置顏色為steelblue
.attr("x", function(d,i){ //設置矩形的x坐標
return padding.left + i * rectStep;
})
.attr("y", function(d){ //設置矩形的y坐標
return height- padding.bottom - d;
})
.attr("width",rectWidth) //設置矩形的寬度
.attr("height",function(d){ //設置矩形的高度
return d;
});
//3. 矩形的exit部分的處理方法
exitRect.remove();
~~~
update部分的處理方法是更新屬性，enter部分的處理方法是添加元素后再賦予其相應的屬性，exit部分的處理方法則是刪除掉多余的元素。這么處理之后，對于原數組dataset，無論是排序還是增減數據，圖表都能夠自動發生相應變化。下面在HTML中分別添加兩個按鈕，一個用于排序，一個用于增加數據。在HTML中的里添加以下兩個按鈕：
~~~
<button type="button">排序</button>
<button type="button">增加數據</button>
~~~
給兩個按鈕的定義了兩個事件函數，但單擊事件發生時，分別調用mysort()和myadd()。這兩個函數的實現很簡單，只要將數據處理后，再調用一次draw()重繪一次即可。
~~~
function mysort(){
dataset.sort(d3.ascending); //排序
draw();
}
function myadd(){
dataset.push( Math.floor(Math.random() * 100) ); //添加一個項
draw();
}
~~~
添加按鈕之后，結果下所示：
由于邊界有限，增加多個數據后矩形會在邊界之外，但是不妨礙本文要表達的意思。
源代碼可打開下面網址后，右鍵查看源代碼：
[http://www.ourd3js.com/demo/template.html](http://www.ourd3js.com/demo/template.html)
謝謝閱讀。
### 文檔信息
- 版權聲明：署名（BY）-非商業性（NC）-禁止演繹（ND）
- 發表日期：2015 年 2 月 7 日
- 更多內容：[OUR D3.JS - 數據可視化專題站](http://www.ourd3js.com/) 和 [CSDN個人博客](http://blog.csdn.net/lzhlzz)
- 備注：本文發表于 [OUR D3.JS](http://www.ourd3js.com/) ，轉載請注明出處，謝謝
