【 D3.js 入門系列 --- 6 】 如何讓圖表動起來

  [5.1]節中製做了一個比較完善的圖表，但它是靜態的，想作出它的動態效果嗎？在D3中只須要短短的幾行代碼便可。

    這一節將涉及4個函數的使用。

1.transition()

    啓動轉變效果只須要添加這個便可。把它加到兩種狀態之間，例如：

 

.attr("fill","red")
.transition()
.attr("fill","steelblue")

    如上代碼，上下兩種屬性 fill 的顏色不一樣，中間添加一行 .transition() ，表示要從紅色變爲藍色，D3會自動對顏色之間的值進行線性插值，最終在動畫中會看到平滑的顏色變化。

 

2.duration()

    指定整個轉變持續多少時間，單位爲毫秒。如 .duration(2000) ，是持續2000毫秒，即2秒。

3.ease()

    指定轉變的方式，經常使用的轉變方式有：

1. linear  普通的線性變化
2. circle  慢慢地到達變換的最終狀態
3. elastic  帶有彈跳的到達最終狀態
4. bounce  在最終狀態處彈跳幾回

    調用時，形如： .ease(「bounce」)

 

4.delay()

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

 

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

    這樣指定，將會延遲500毫秒播放一個1000毫秒的動畫，故整個動畫長度爲1500毫秒。

 

 

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

   這樣指定的話，假設有10個元素，那麼第1個元素不延遲（由於 i = 0），那麼第2個元素延遲200毫秒，第3個延遲400毫秒，依次類推….整個動畫的長度爲 200*(10-1) + 1000 = 2800 毫秒。

 

 

    要製做轉變效果須要用到以上四個函數，實際使用時，一般形如：

 

.transition()
.duration(3000)
.ease("bounce")
.delay(function(d,i){
    return 200*i;
})

    先後接轉變效果的初始狀態和目標狀態。

 

 

本文來自：

博客爲： www.ourd3js.com 

    csdn博客爲： blog.csdn.net/lzhlzz