tween 補間動畫

補間動畫是指在兩個畫面轉換時的動畫，也就是讓動畫動起來的角色，簡單說就是過場

在D3中的transition除了提供基本的預設補間動畫之外，也提供了tween來讓我們自訂補間動畫的內容

這次也一樣使用之前的長條圖來做練習
tween(name,[value])
name是用來替這個補間取名字,value要使用匿名function來定義內容，最後要在return一個匿名函式
在使用tween時也常會搭配interpolate來使用，這邊用到兩個來定義文字內容跟顏色變換
interpolateRound(a,b)：計算a~b的補間數字(整數，需要小數可使用interpolateNumber)
interpolateRgb(a,b):計算兩個顏色之間的補間顏色

使用時必須要利用this來指定正確的元件，在v4的版本中必須先在外部的匿名函數將this指定一個名稱才能在return的匿名函式中使用(可以參考這篇)，return的funcion(t)中的t可以想成是補間動畫的影格，在回傳的function中需要利用Html的DOM來對元素進行操控

設定text中的tween

• 讓text從0開始增加到預設的資料大小
• 讓文字的顏色從白色漸變成黑色

.tween('number',function(d){
    var node = this ; //將this保留為node來操控
	var i = d3.interpolateRound(0, d);
	var c = d3.interpolateRgb('#FFF', '#000');
    return function(t) {
        node.textContent = i(t); //利用html的DOM操控
        node.setAttribute("fill",c(t));
        // node.style.fill=c(t)
    };
});

除了tween之外，在d3的v4版還提供了其他補間來簡化tween的操作

• attrTween
• styleTween

設定rect中的attrTween

• 讓長條圖的顏色從白色漸變到指定顏色

.attrTween("fill", function(d) {
  return d3.interpolateRgb('#fff',colorlinear(d));
});

demo&code:https://codepen.io/FanWay/pen/aEYYdR