標籤：d3 enter exit update select
本人的個人部落格為： www.ourd3js.com
csdn部落格為： blog.csdn.net/lzhlzz
轉載請註明出處，謝謝。
在前面幾節中反覆出現了如下代碼：
svg.selectAll("rect") .data(dataset) .enter() .append("rect") 當所選擇的 rect 數量比繫結資料 dataset 的數量少的時候，通常會用到以上代碼，這一節就詳細說說當被選擇元素和資料數量不一致時該如何處理。
這一節將涉及到三個函數。
1. update() 當對應的元素正好滿足時 （ 綁定資料數量 = 對應元素 ）
實際上並不存在這樣一個函數，只是為了要與之後的 enter 和 exit 一起說明才想象有這樣一個函數。但對應元素正好滿足時，直接操作即可，後面直接跟 text ，style 等操作即可。
2. enter() 當對應的元素不足時 （ 綁定資料數量 > 對應元素 ）
當對應的元素不足時，通常要添加元素，使之與綁定資料的數量相等。後面通常先跟 append 操作。
3. exit() 當對應的元素過多時 （ 綁定資料數量 < 對應元素 ）
當對應的元素過多時，通常要刪除元素，使之與綁定資料的數量相等。後面通常要跟 remove 操作。
下面看看具體的用法：
<body><p>AAAAAAAAA</p><p>BBBBBBBBB</p><p>CCCCCCCCC</p><script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script>var dataset = [ 10 , 20 , 30 , 40 , 50 ];var update = d3.select("body").selectAll("p").data(dataset);var enter = update;update.text(function(d,i){return "update " + d;});enter.enter() .append("p") .text(function(d,i){return "enter " + d;}); </script> </body> 上面的代碼分別用了變數名 update 和 enter 來表示各自的部分，上面的代碼的結果為：
結果圖可以看到新添加的元素 enter 的部分。
var dataset = [ 10 , 20 ];var update = d3.select("body").selectAll("p").data(dataset);var exit = update;update.text(function(d,i){return "update " + d;});exit.exit() .text(function(d,i){return "exit";}); 結果圖為： 可以看到，調用 exit() 函數後，實際上是返回沒有對應資料的元素。通常我們可以刪除掉多餘的元素，如：
exit.exit().remove();
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
