【 D3.js 選擇集與資料詳解 — 4 】 enter和exit的處理方法以及處理模板
繫結資料之後，選擇集分為三部分：update、enter、exit。這三部分的處理辦法是什麼呢？本文將講解其處理方法，以及一個常用的處理模板。
1. enter的處理方法
如果沒有足夠的元素，那麼處理方法通常是使用append()新增元素。請看下面的程式碼：
[javascript] view plain copy- <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元素，內容分別為：
[javascript] view plain copy- <p>3</p>
- <p>6</p>
- <p>9</p>
通常，從伺服器讀取檔案後，資料是有的，但是網頁中是沒有元素的。這是D3一個很重要的特性，即可以選擇一個空集，然後使用enter().append()的形式來插入元素。假設現在body裡沒有p元素，請看如下程式碼：
[javascript]- 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元素，請看如下程式碼：
[javascript] view plain copy- 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. 處理模板
經過上兩節的內容，知道了如何處理多餘的資料和元素。但是，有時候我們不知道是資料多，還是元素多，或者允許使用者決定誰多誰少。對於事前不知道陣列長度或元素數量的問題，可定義一套處理的模板。請看如下程式碼：
[javascript] view plain copy- 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元素對應陣列中的一個項，沒有多餘的。這種方法，可稱為有一套處理的模板，在資料需要經常更新時很常用。