交互式數據可視化－D3.js（五）過渡

過渡

過渡效果的起始狀態和目標狀態都很明確，指定以後元素會從起始狀態過渡爲目標狀態。初始化一個過渡效果，有以下幾個方法：
var tran = d3.transition() - 建立一個過渡對象

tran.delay() - 設置延時時間，過渡通過一段時間後纔會開始

tran.duration() - 設定過渡的持續時間

tran.ease() - 設定過渡的樣式。

tran.attr() - 設置過渡屬性

tran.attrTween(name[, factory]) - factory會對每一個選中的元素進行調用，並依次傳入當前綁定元素的數據

tran.style() - 設置過渡樣式;

tran.styleTween() - 設置樣式插值

tran.text('value') - 過渡開始時將文本設置爲value值

tran.tween(name[, factory]) - 將屬性name按照factory插值進行過渡。attrTween和styleTween都是用此函數實現的

在使用過渡時是對於選擇集自身的元素來講的，選擇集的子元素不受影響。如要使用子元素須要使用d3的選擇集，

tran.select() - 符合選擇器的第一個子元素進行過渡

tran.selectAll() - 符合選擇器的全部子元素進行過渡

tran.filter() - 過濾器與selection.filter()相似

tran.each(function) - 爲過渡中的每一個選中的元素調用指定的 function, 等價於 selection.each。

大體是使用方法以下：

var dataset = [100, 100, 100]
var svg = d3.select('#transition').append('svg').attr('width', 400).attr('height', 300);
var g = svg.append('g')
var drawRect = g.selectAll('rect').data(dataset).enter().append('rect')
drawRect.attr('fill', '#333').attr('x', 10).attr('y', function(d, i){
    return (i * 35) + 10
}).attr('width', 100).attr('height', 30);
var rectTran = g.transition().select('rect').delay(500).duration(1000).attr('width', 300)