【 D3.js 入門系列 --- 6 】 如何使移動圖表

標籤：

    我的個人部落格是： www.ourd3js.com 

    csdn部落格為： blog.csdn.net/lzhlzz 

    轉載請註明出處，謝謝。

    [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;})

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

    實際效果可見： http://www.ourd3js.com/demo/transition.html

著作權聲明：本文部落格原創文章。部落格，未經同意，不得轉載。

【 D3.js 入門系列 --- 6 】 如何使移動圖表