d3动画

d3的动画关键是 transition 过渡对象。

1. 创建过渡对象有两种方式

1. d3.transition
2. selection.transition

过渡对象与选择对象是两个对象，方法和属性有差别。

2. 过渡对象的常用方法

transition.delay 延迟开始
transition.duration 过渡时间
transition.ease 过渡函数

3. 过渡动画的常用方式

transition.attr(name, value) 将属性过渡到目标值
transition.attrTween(name, tween) 将属性通过插值函数tween过渡到目标值
transition.style(name, value, [priority]) 将样式过渡到目标值，priority是优先级，有null和important两个值
transition.styleTween(name, tween, [priority]) 将样式过渡到目标值，使用函数tween
transition.text(value) 过渡开始时候，将文本设置为value
transition.tween(name,factory) 将属性name，按照函数factory过渡
transition.remove() 过渡结束后，删除元素，元素淡出效果常用

4. 过渡对象选择子元素

过渡对象，还可以继续对元素进行筛选，方法与选择集相同。

transition.select()
transition.selectAll()
transition.filter()

5. 过渡对象的事件

过渡对象可以监听如下事件

start 过渡开始
end 过渡结束
interrupt 过渡切换到另一个过渡

g.transition()
.duration(2000)
.selectAll('rect')
.each('start',function(d,i){
console.log('start')
})
.each('end',function(d,i){
console.log('end')
})
.each('interrupt',function(d,i){
console.log('interrupt');
})
.attr('width',300)

过渡对象可以用call调用函数

transition.call(function,[arguments])

此方法在坐标轴上常用：

g.transition().duration(2000).call(xAxis);

可以让坐标轴过渡变化。

6. 常用过渡函数

1. linear 线性
2. cubic 逐渐加快
3. elastic 弹簧
4. back 先回缩一点，再冲到终点
5. bounce 在终点处弹跳几次

可以使用in和out进行组合，例如linear-in,elastic-out-in,bounce-out,back-in-out等。