D3.js系列——動態效果和Update、Enter、Exit的理解

1、動態效果

　　D3 支持製做動態的圖表。有時候，圖表的變化須要緩慢的發生，以便於讓用戶看清楚變化的過程，也能給用戶不小的友好感。

一、什麼是動態效果

　　前面製做的圖表是一蹴而就地出現，而後繪製完成後再也不發生變化的，這是靜態的圖表。

　　動態的圖表，是指圖表在某一時間段會發生某種變化，多是形狀、顏色、位置等，並且用戶是能夠看到變化的過程的。例如，有一個圓，圓心爲 (100, 100)。如今咱們但願圓的 x 座標從 100 移到 300，而且移動過程在 2 秒的時間內發生。這種時候就須要用到動態效果，在 D3 裏咱們稱之爲過渡（transition）。

二、實現動態的方法

　　D3 提供了 4 個方法用於實現圖形的過渡：從狀態 A 變爲狀態 B。

transition()

　　啓動過渡效果。其先後是圖形變化先後的狀態（形狀、位置、顏色等等），例如：

.attr("fill","red")         //初始顏色爲紅色
.transition()               //啓動過渡
.attr("fill","steelblue")   //終止顏色爲鐵藍色

　　D3 會自動對兩種顏色（紅色和鐵藍色）之間的顏色值（RGB值）進行插值計算，獲得過渡用的顏色值。咱們無需知道中間是怎麼計算的，只須要享受結果便可。

duration()

　　指定過渡的持續時間，單位爲毫秒。如 duration(2000) ，指持續 2000 毫秒，即 2 秒。

ease()

　　指定過渡的方式，經常使用的有：

　　　　linear：普通的線性變化

　　　　circle：慢慢地到達變換的最終狀態

　　　　elastic：帶有彈跳的到達最終狀態

　　　　bounce：在最終狀態處彈跳幾回

　　調用時，格式形如： ease(「bounce」)。

delay()

　　指定延遲的時間，表示必定時間後纔開始轉變，單位一樣爲毫秒。此函數能夠對總體指定延遲，也能夠對個別指定延遲。

　　例如，對總體指定時：

.transition() .duration(1000) .delay(500)

　　如此，圖形總體在延遲 500 毫秒後發生變化，變化的時長爲 1000 毫秒。所以，過渡的總時長爲1500毫秒。

　　又如，對一個一個的圖形（圖形上綁定了數據）進行指定時：

.transition() .duration(1000) .delay(funtion(d,i){ return 200*i; })

　　如此，假設有 10 個元素，那麼第 1 個元素延遲 0 毫秒（由於 i = 0），第 2 個元素延遲 200 毫秒，第 3 個延遲 400 毫秒，依次類推….整個過渡的長度爲 200 * 9 + 1000 = 2800 毫秒。

三、實現簡單的動態效果

    var width=400,height=400; var svg = d3.select("body").append("svg").attr("width",width).attr("height",height); var circle=svg.append("circle").attr("cx",100).attr("cy",100).attr("r",50).style("fill","green"); circle.transition() .ease("bounce") // 終點彈跳
        .duration(2000) //過渡時長2s
        .attr("cx",300) //圓心座標從100變爲300
        .attr("r",25)   //半徑變爲25
        .style("fill","red") //顏色變紅色
        .delay(1000);   //延時1s執行

2、理解 Update、Enter、Exit

　　Update、Enter、Exit 是 D3 中三個很是重要的概念，它處理的是當選擇集和數據的數量關係不肯定的狀況。

一、什麼是 Update、Enter、Exit

　　前幾章裏，反覆出現了形如如下的代碼。

svg.selectAll("rect")   //選擇svg內全部的矩形
    .data(dataset)      //綁定數組
    .enter()            //指定選擇集的enter部分
    .append("rect")     //添加足夠數量的矩形元素

　　前面提到，這段代碼使用的狀況是當如下狀況出現的時候：有數據，而沒有足夠圖形元素的時候，使用此方法能夠添加足夠的元素。當時並無深究這段代碼是什麼意思，本章將對此進行講解。可是，因爲此問題相對複雜，本章只進行最初步的介紹。

　　假設，在 body 中有三個 p 元素，有一數組 [3, 6, 9]，則能夠將數組中的每一項分別與一個 p 元素綁定在一塊兒。可是，有一個問題：當數組的長度與元素數量不一致（數組長度 > 元素數量 or 數組長度 < 元素數量）時呢？這時候就須要理解 Update、Enter、Exit 的概念。若是數組爲 [3, 6, 9, 12, 15]，將此數組綁定到三個 p 元素的選擇集上。能夠想象，會有兩個數據沒有元素與之對應，這時候 D3 會創建兩個空的元素與數據對應，這一部分就稱爲 Enter。而有元素與數據對應的部分稱爲 Update。若是數組爲 [3]，則會有兩個元素沒有數據綁定，那麼沒有數據綁定的部分被稱爲 Exit。示意圖以下所示。

　　看到這，我想你們能體會到爲何本節最開始處的代碼可以給 SVG 內添加足夠數量的元素了吧。它的意思實際上是：

　　此時 SVG 裏沒有 rect 元素，即元素數量爲 0。有一數組 dataset，將數組與元素數量爲 0 的選擇集綁定後，選擇其 Enter 部分（請仔細看上圖），而後添加（append）元素，也就是添加足夠的元素，使得每個數據都有元素與之對應。

二、Update 和 Enter 的使用

　　當對應的元素不足時 （ 綁定數據數量 > 對應元素 ），須要添加元素（append）。

　　如今 body 中有三個 p 元素，要綁定一個長度大於 3 的數組到 p 的選擇集上，而後分別處理 update 和 enter 兩部分。

var dataset = [ 3 , 6 , 9 , 12 , 15 ]; //選擇body中的p元素
var p = d3.select("body").selectAll("p"); //獲取update部分
var update = p.data(dataset); //獲取enter部分
var enter = update.enter(); //update部分的處理：更新屬性值
update.text(function(d){ return "update " + d; }); //enter部分的處理：添加元素後賦予屬性值
enter.append("p") .text(function(d){ return "enter " + d; });

　　請你們記住：

　　update 部分的處理辦法通常是：更新屬性值

　　enter 部分的處理辦法通常是：先添加元素後，再賦予屬性值

三、Update 和 Exit 的使用

　　當對應的元素過多時 （ 綁定數據數量 < 對應元素 ），須要刪掉多餘的元素。

　　如今 body 中有三個 p 元素，要綁定一個長度小於 3 的數組到 p 的選擇集上，而後分別處理 update 和 exit 兩部分。

var dataset = [ 3 ]; //選擇body中的p元素
var p = d3.select("body").selectAll("p"); //獲取update部分
var update = p.data(dataset); //獲取exit部分
var exit = update.exit(); //update部分的處理：更新屬性值
update.text(function(d){ return "update " + d; }); //exit部分的處理：修改p元素的屬性
exit.text(function(d){ return "exit"; }); //exit部分的處理一般是刪除元素 // exit.remove();

　　請你們記住：

　　exit 部分的處理辦法通常是：刪除元素（remove）