一 、 過渡的啟動 啟動過渡效果，與以下四個方法相關: d3.transition([selection],[name]) //創建一個過渡對象。但是由於每個選擇集中都有transition()方法，可用d3.select("rect").transition()的方式來創建過渡，因此一般不直接用d ...
一 、 過渡的啟動 啟動過渡效果，與以下四個方法相關: 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的時候。就刪除該元素。此外，還可以據此做成元素顏色慢慢變淡，最後刪除。
