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");