第九章 讓圖表動(dòng)起來(lái)

D3 支持制作動(dòng)態(tài)的圖表。有時(shí)候，圖表的變化需要緩慢的發(fā)生，以便于讓用戶(hù)看清楚變化的過(guò)程，也能給用戶(hù)不小的友好感。

什么是動(dòng)態(tài)效果

前面幾章制作的圖表是一蹴而就地出現(xiàn)，然后繪制完成后不再發(fā)生變化的，這是靜態(tài)的圖表。

動(dòng)態(tài)的圖表，是指圖表在某一時(shí)間段會(huì)發(fā)生某種變化，可能是形狀、顏色、位置等，而且用戶(hù)是可以看到變化的過(guò)程的。

例如，有一個(gè)圓，圓心為 (100, 100)?，F(xiàn)在我們希望圓的 x 坐標(biāo)從 100 移到 300，并且移動(dòng)過(guò)程在 2 秒的時(shí)間內(nèi)發(fā)生。

這種時(shí)候就需要用到動(dòng)態(tài)效果，在 D3 里我們稱(chēng)之為過(guò)渡（transition）。

實(shí)現(xiàn)動(dòng)態(tài)的方法

D3 提供了 4 個(gè)方法用于實(shí)現(xiàn)圖形的過(guò)渡：從狀態(tài) A 變?yōu)?strong>狀態(tài) B。

transition()

啟動(dòng)過(guò)渡效果。

其前后是圖形變化前后的狀態(tài)（形狀、位置、顏色等等），例如：

.attr("fill","red")         //初始顏色為紅色
.transition()               //啟動(dòng)過(guò)渡
.attr("fill","steelblue")   //終止顏色為鐵藍(lán)色

D3 會(huì)自動(dòng)對(duì)兩種顏色（紅色和鐵藍(lán)色）之間的顏色值（RGB值）進(jìn)行插值計(jì)算，得到過(guò)渡用的顏色值。我們無(wú)需知道中間是怎么計(jì)算的，只需要享受結(jié)果即可。

duration()

指定過(guò)渡的持續(xù)時(shí)間，單位為毫秒。

如 duration(2000) ，指持續(xù) 2000 毫秒，即 2 秒。

ease()

指定過(guò)渡的方式，常用的有：

• linear：普通的線(xiàn)性變化
• circle：慢慢地到達(dá)變換的最終狀態(tài)
• elastic：帶有彈跳的到達(dá)最終狀態(tài)
• bounce：在最終狀態(tài)處彈跳幾次

調(diào)用時(shí)，格式形如： ease(“bounce”)。

delay()

指定延遲的時(shí)間，表示一定時(shí)間后才開(kāi)始轉(zhuǎn)變，單位同樣為毫秒。此函數(shù)可以對(duì)整體指定延遲，也可以對(duì)個(gè)別指定延遲。

例如，對(duì)整體指定時(shí)：

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

如此，圖形整體在延遲 500 毫秒后發(fā)生變化，變化的時(shí)長(zhǎng)為 1000 毫秒。因此，過(guò)渡的總時(shí)長(zhǎng)為1500毫秒。

又如，對(duì)一個(gè)一個(gè)的圖形（圖形上綁定了數(shù)據(jù)）進(jìn)行指定時(shí)：

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

如此，假設(shè)有 10 個(gè)元素，那么第 1 個(gè)元素延遲 0 毫秒（因?yàn)?i = 0），第 2 個(gè)元素延遲 200 毫秒，第 3 個(gè)延遲 400 毫秒，依次類(lèi)推….整個(gè)過(guò)渡的長(zhǎng)度為 200 * 9 + 1000 = 2800 毫秒。

實(shí)現(xiàn)簡(jiǎn)單的動(dòng)態(tài)效果

下面將在 SVG 畫(huà)布里添加三個(gè)圓，圓出現(xiàn)之后，立即啟動(dòng)過(guò)渡效果。

第一個(gè)圓，要求移動(dòng) x 坐標(biāo)。

var circle1 = svg.append("circle")
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("r", 45)
        .style("fill","green");

//在1秒（1000毫秒）內(nèi)將圓心坐標(biāo)由100變?yōu)?00
circle1.transition()
    .duration(1000)
    .attr("cx", 300);

第二個(gè)圓，要求既移動(dòng) x 坐標(biāo)，又改變顏色。

var circle2 = svg.append("circle")... //與第一個(gè)圓一樣，省略部分代碼

//在1.5秒（1500毫秒）內(nèi)將圓心坐標(biāo)由100變?yōu)?00，
//將顏色從綠色變?yōu)榧t色
circle2.transition()
    .duration(1500)
    .attr("cx", 300)
    .style("fill","red");

第三個(gè)圓，要求既移動(dòng) x 坐標(biāo)，又改變顏色，還改變半徑。

var circle3 = svg.append("circle")... //與第一個(gè)圓一樣，省略部分代碼

//在2秒（2000毫秒）內(nèi)將圓心坐標(biāo)由100變?yōu)?00
//將顏色從綠色變?yōu)榧t色
//將半徑從45變成25
//過(guò)渡方式采用bounce（在終點(diǎn)處彈跳幾次）
circle3.transition()
    .duration(2000)
    .ease("bounce")
    .attr("cx", 300)
    .style("fill","red")
    .attr("r", 25);

結(jié)果請(qǐng)查看以下鏈接：

展示地址： http://www.ourd3js.com/demo/rm/R-6.0/SimpleTransition.html

給柱形圖加上動(dòng)態(tài)效果

在上一章完整柱形圖的基礎(chǔ)上稍作修改，即可做成一個(gè)帶動(dòng)態(tài)效果的、有意思的柱形圖。

在添加文字元素和矩形元素的時(shí)候，啟動(dòng)過(guò)渡效果，讓各柱形和文字緩慢升至目標(biāo)高度，并且在目標(biāo)處跳動(dòng)幾次。

對(duì)于文字元素，代碼如下：

.attr("y",function(d){
    var min = yScale.domain()[0];
    return yScale(min);
})
.transition()
.delay(function(d,i){
    return i * 200;
})
.duration(2000)
.ease("bounce")
.attr("y",function(d){
    return yScale(d);
});

文字元素的過(guò)渡前后，發(fā)生變化的是 y 坐標(biāo)。其起始狀態(tài)是在 y 軸等于 0 的位置（但要注意，不能在起始狀態(tài)直接返回 0，要應(yīng)用比例尺計(jì)算畫(huà)布中的位置）。終止?fàn)顟B(tài)是目標(biāo)值。

對(duì)于矩形元素，思想與文字元素一樣，只是在計(jì)算起始狀態(tài)時(shí)要稍微復(fù)雜一些，請(qǐng)讀者自行研讀源代碼。

展示地址： http://www.ourd3js.com/demo/rm/R-6.0/ChartTransition.html

源代碼

下載地址：rm60.zip