D3.js 動畫 過渡效果 (V3版本)

一 、 過渡的啓動

 

啓動過渡效果，與如下四個方法相關:

 

d3.transition([selection],[name])

//建立一個過渡對象。可是因爲每一個選擇集中都有transition()方法，可用d3.select("rect").transition()的方式來建立過渡，所以通常不直接用d3.transition()。

 

transition.delay([delay])

//設定延遲的時間。過渡會通過必定時間後纔開始發生。單位是毫秒。

 

transition.duration([duration])

//設定過渡的持續時間(不包括延遲時間)，單位是毫秒。如:duration(2000),是持續2000ms。

 

transition.ease(vlaue[,arguments])

//設定過渡樣式，例如線性過渡、在目標處彈跳幾回等方式。

 

接下來製做一個過渡效果:

 

 1  　　　　var width = 600;  2         var height = 400;  3 
 4         var svg = d3.select("#body")  5                     .append("svg")  6                     .attr("width",width)  7                     .attr("height",height)  8         
 9         svg.append("rect") 10             .attr("fill","yellow") 11             .attr("x",100) 12             .attr("y",100) 13             .attr("width",100) 14             .attr("height",30) 15  .transition() 16             .attr("width",300)

 

上述代碼只使用了transition()。默認狀況下，延遲(delay)爲0ms，持續時長(duration)爲250ms。請注意過渡先後的狀態:

過渡前，矩形的寬度(width)爲100。

過渡後，矩形的寬度爲300。

 

 

過渡的先後狀態必須是不一樣的，才能看到變化。不一樣狀態。能夠是形狀、顏色、位置、透明度等。展現的是矩形在0ms時刻的寬度漸變到250ms時刻的寬度。

 

若是沒有調用transition()，append()返回該元素的選擇集對象。若是調用了transition()，返回的就不是選擇集對象，而是一個過渡對象。選擇集對象和過渡對象是徹底不一樣的概念，其成員變量和方法有所不一樣。關於區別，請看代碼:

 

 1 　　var rect = svg.append("rect")  2                     .attr("fill","yellow")  3                     .attr("x",100)  4                     .attr("y",100)  5                     .attr("width",100)  6                     .attr("height",30)  7         
 8         //打印rect
 9         console.log(rect)       //rect是選擇集
10 
11         //啓動過渡效果
12         var rectTran = rect.transition() 13 
14         //打印rectTran
15         console.log(rectTran)   //rectTran是一個過渡對象

 

rect是一個選擇集對象，rectTran是一個過渡對象。控制檯輸出結果如圖：能夠看到，它們是不一樣的兩種對象。

 

 

 

 

以下圖所示：左圖爲選擇集對象的方法列表。能夠找到data()、sort()、append()等以前介紹過得方法。右圖是過渡對象的方法列表，沒有data()、datum()等方法。所以，過渡對象是不能綁定數據的。

 

 

調用transition()，獲得過渡對象。以後，通常會跟着delay()、duration()、ease()，用於設置延遲、過渡時間、過渡樣式。舉個例子:

 

 1  　　　　var rect = svg.append("rect")  2                     .attr("fill","yellow")  3                     .attr("x",100)  4                     .attr("y",100)  5                     .attr("width",100)  6                     .attr("height",30)  7         var rectTran = rect.transition()  8                         .delay(500)         //延遲500ms再開始
 9                         .duration(1000)     //過渡時長爲1000ms
10                         .ease("blunce")     //過渡樣式
11                         .attr("width",300)  //目標屬性

 

這段代碼的過渡效果總時長爲1500ms(延遲500ms+過渡時長1000ms)，在目標屬性處會彈跳幾回，這是因爲過渡樣式被設置爲blunce。

 

另外，transition()可屢次調用。每一次都會產生一個新的過渡，能夠連續使用。請看代碼:

 

 1 　　　　var rect = svg.append("rect")  2                     .attr("fill","yellow")  3                     .attr("x",100)  4                     .attr("y",100)  5                     .attr("width",100)  6                     .attr("height",30)  7 
 8 
 9         var rectTran = rect.transition()        //開始一個過渡
10                         .attr("width",300)      //目標寬度爲300
11                         .transition()           //開始一個過渡
12                         .attr("height",300)     //目標高度爲300
13                         .transition()           //開始一個過渡
14                         .attr("width",100)      //目標寬度爲100
15                         .transition()           //開始一個過渡
16                         .attr("height",100)     //目標高度爲100

 

這段代碼中，第一個過渡是將矩形的寬度轉變到300，第二個是將高度轉變成300，第三個是將寬度轉變到100，第四個是將高度轉變到100.因爲沒有設定延遲和過渡時間，都使用默認值。

 

 

二 、 過渡的屬性

 

過渡的屬性，是指元素的狀態。因爲過渡的先後狀態不一樣，所以須要指定過渡先後元素的不一樣屬性。

 

transition.attr(name,value)

//將屬性name過渡到目標值value。value能夠是一個函數。

 

transition.attrTeeen(name,tween)

//將屬性name使用插值函數tween()進行過渡。

transition.style(name,value[,priority])

//將css樣式的name屬性過渡到目標值value。priority是可選參數，表示css樣式的優先級，只有null和important兩個值。

 

transition.styleTween(name,tween[,priority])

//將css樣式的屬性name使用函數tween進行過渡。與attrTween()相似。

transition.text(value)

//過渡開始時，將文本設置爲value值

 

transition.tween(name,factory)

//將屬性name按照函數factory進行過渡。attrTween()和StyleTween()都是用此函數實現的。

transition.remove()

//過渡結束後，刪除被選擇的元素。

 

transition.attr(name,value) 和 transition.attrTeeen(name,tween)操做的是x、y、width、height這樣的屬性。

transition.attr(name,value) 的使用很好理解，例如:

 

1 .attr("width",100) 2 .transition() 3 .attr("width",300)

 

初始寬度爲100，目標寬度爲300，過渡會在250ms(默認時間)內將寬度屬性從100變爲300，屬性變化的中間值是由默認的插值函數計算的。

 

若是要手動設置插值函數，要使用transition.attrTeeen(name,tween),舉個例子:

 

 1 　　　　var rect = svg.append("rect")  2                     .attr("fill","yellow")  3                     .attr("x",100)  4                     .attr("y",100)  5                     .attr("width",100)  6                     .attr("height",30)  7 
 8         var rectTran = rect.transition()  9                         .duration(2000) 10                         .attrTween("width",function(d,i,a){ 11                             return function(t){ 12                                 return Number(a) + t * 300
13  } 14                         })

 

attrTween()的第一個參數是屬性名，第二個參數是一個無名函數function(d,i,a)。d是被綁定數據，i是索引號，a是屬性width的初始值。該函數返回的function(t)，就是插值函數。其參數t的範圍是[0,1]，0表示變化的起始，1表示變化的結束。此處，初始值a等於100，當t等於0時，function(t)返回100。當t等於1時，function(t)返回400.此時，該過渡屬性將width屬性從100過渡到400，所用時間爲2000ms(2s)。

 

transition.style(name,value[,priority]) 和 transition.styleTween(name,tween[,priority])操做的是style裏的樣式。舉個例子: 

 

1  　　svg.append("rect") 2             .attr("fill","yellow") 3             .attr("x",100) 4             .attr("y",100) 5             .attr("width",100) 6             .attr("height",30) 7  .transition() 8             .duration(2000) 9             .attr("fill",'red')

 

這段代碼會將style裏的fill的值從yellow變成red，過分時間爲默認的2000ms。

 

對文字進行過渡要用到tween()。前面在介紹attrTween()的時候對矩形的寬度實現了過渡，先添加以下要求:

矩形上添加文字，用來標識矩形的寬度。同時，矩形的寬度在變化的時候，文字也要跟着變化。代碼:

 

 1 　　svg.append("rect")  2             .attr("fill","yellow")  3             .attr("x",100)  4             .attr("y",100)  5             .attr("width",100)  6             .attr("height",30)  7  .transition()  8             .duration(2000)  9             .attr("width",300) 10 
11         var text = svg.append("text") 12                     .attr("fill","white") 13                     .attr("x",150) 14                     .attr("y",100) 15                     .attr("dy","1.2em") 16                     .attr("text-anchor","end") 17                     .text(100) 18 
19 
20         var initx = text.attr("x") 21         var initText = text.text() 22         
23         var textTran = text.transition() 24                         .duration(2000) 25                         .tween("text",function(){ 26                             return function(t){ 27                                 d3.select(this) 28                                     .attr("x",Number(initx) + t * 250 ) 29                                     .text(Math.floor(Number(initText) + t * 300 )) 30  } 31                         })

　　

tween()的第二個參數返回的是function(t),t的範圍也是[0,1] : 

 

1         //當t爲0時，函數體力的操做是:
2         d3.select(this) 3             .attr("x",150 + 0 * 250) 4             .text(Math.floor(100 + 0 * 300)) 5 
6         //當t爲1時，函數體裏的操做是:
7         d3.select(this) 8             .attr("x",150 + 1 * 250 ) 9             .text(Math.floor(100 + 1 * 300))    

 

過渡的效果圖爲:隨着時間的推移，文字的內容和文字的位置都是變化的。

 

 

 

transition.remove() 當元素淡出的時候須要用到。舉個例子:

 

 

 1 　　var rect = svg.append("rect")  2                     .attr("fill","yellow")  3                     .attr("x",100)  4                     .attr("y",100)  5                     .attr("width",100)  6                     .attr("height",30)  7 
 8  rect.transition()  9             .attr("width",0) 10             .remove()

 

當矩形過渡的目標完成，即width變爲0的時候。就刪除該元素。此外，還能夠據此作成元素顏色慢慢變淡，最後刪除。