在官網有著豐富demo的基礎上，使用d3繪製一副靜態圖表並不是難事。但我們更多的需求是：根據使用者操作動態獲取資料庫中資料，進而重新整理檢視。

最生硬的方法：刪除element,重新繪製；

d3.select('#svgID').remove();   //刪除整個SVG
d3.select('#svgID')
  .selectAll('*')
  .remove();                    //清空SVG中的內容

此方法的確可以做到重新整理檢視的效果。
優點：快準狠！
缺點：
1. 不能實現友好的動畫切換效果
2. 不能保留之前使用者操作的狀態

正確開啟方式

：利用enter/exit更新檢視

先理解enter/exit 二者的作用

如上圖所示，簡而言之，enter（）是資料超出部分，exit（）是圖形多餘部分。
值得注意的是，var div = d3.selectAll('div');其中div是當前存在的div。

所以更新步驟為：

1. 對已存在的div我們要做的是update操作。
2. 對空缺的enter()部分做補充操作。
3. 對多餘的exit()部分執行.remove()。
4. 對更改的動作新增動畫效果，使重新整理更酷炫！

ps: update操作是指根據資料重新整理檢視中的圖形以及文字。

問題1：如果是從DATA（陣列）中刪除資料，其他資料不變，那麼是否需要重新整理操作。
問題同：在刪除資料的時候，為什麼介面中的圖形在“亂跑”o(╯□╰)o。
解答：必須要！

#正確理解d3.js中.data(),資料與檢視繫結原理。

d3.js中的.data()是元素集合與資料集合的對映。如下圖所示：

我們可以看到圖中的div2此時對應的資料應該是data3,檢視與資料不一致，所以需要更新檢視。

假設我們做的是如下程式碼的資料更新

var data = [1,2,3,4];
var div = d3.selectAll('div').data(data);
div.enter()
   .append('div')
   .text(function(d){return d;});

//刪除2
var
 
 newData = [1,3,4]
div = d3.selectAll('div').data(newData);
//刪除多餘元素
div.exit().remove();

可以發現元素被刪除的不是我們所期望被刪除的元素。我們刪除資料2的時候，使用exit()刪除的元素卻是佇列的最後一個元素。

所以建議將重新整理檢視封裝為方法，方便隨時呼叫。