D3.js：動態效果

D3 提供了 4 個方法用於實現圖形的過渡：

- transition()

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

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

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 毫秒。

1. 實現簡單的動態效果

下面將在 SVG 畫布裏添加三個圓，圓出現以後，當即啓動過渡效果。

//畫布大小
var width = 500, height = 500; // 在body裏添加一個SVG畫布
var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height);

- 第一個圓，要求移動 x 座標

var circle1 = svg.append("circle") .attr("cx", 100) .attr("cy", 100) .attr("r", 45) .style("fill","green"); //在1秒（1000毫秒）內將圓心座標由100變爲300
circle1.transition() .duration(1000) .attr("cx", 300);

- 第二個圓，要求既移動 x 座標，又改變顏色

var circle2 = svg.append("circle") .attr("cx", 100) .attr("cy", 100) .attr("r", 45) .style("fill","green"); //在1.5秒（1500毫秒）內將圓心座標由100變爲300， //將顏色從綠色變爲紅色
circle2.transition() .duration(1500) .attr("cx", 300) .style("fill","red");

- 第三個圓，要求既移動 x 座標，又改變顏色，還改變半徑

var circle3 = svg.append("circle") .attr("cx",100) .attr("cy",100) .attr("r",45) .style("fill","green"); //在2秒（2000毫秒）內將圓心座標由100變爲300 //將顏色從綠色變爲紅色 //將半徑從45變成25 //過渡方式採用bounce（在終點處彈跳幾回）
circle3.transition() .duration(2000) .ease("bounce") .attr("cx", 300) .attr("r", 25) .style("fill","red");