【D3.js 学习总结】7、D3过渡动画

前面我们做的各种图表都是静态的，现在没个动效的图表都不好意思拿出手，好在D3为我们提供了过渡动画；

看一个示例（查看在线演示）：

    var data = [100,200];
    var body = d3.select('body');
    var svg = body.append('svg').attr('width',500).attr('height',500);
    var g = svg.selectAll('rect').data(data);
    g.enter().append('rect')
        .attr('y',function(d,i){
          return (i+1)*50;
        })
        .attr('x',50)
        .attr('width',10)
        .attr('height',20)
        .attr('fill','#000')

    g.transition()
        .delay(1000)
        .duration(1000)
        .attr('width',function(d){
          return d;
        })

启动过渡效果只需要添加 transition() 这个即可，跟过渡相关的方法如下：

.duration()

指定整个过渡持续多少时间，单位为毫秒。如 .duration(2000) ，是持续2000毫秒，即2秒。

.ease()

指定过渡的方式，常用的过渡方式有：

• linear 普通的线性变化
• circle 慢慢地到达过渡的最终状态
• elastic 带有弹跳的到达最终状态
• bounce 在最终状态处弹跳几次
  调用时，形如： .ease(“bounce”)

.delay()

指定延迟的时间，表示一定时间后才开始过渡，单位同样为毫秒。这个函数可以对整体指定延迟，也可以对个别指定延迟。
对整体指定时，如：

.transition()
.duration(1000)
.delay(500)

这样指定，将会延迟500毫秒播放一个1000毫秒的动画，故整个动画长度为1500毫秒。

.transition()
.duration(1000)
.delay(funtion(d,i){
    return 200*i;
})

这样指定的话，假设有10个元素，那么第1个元素不延迟（因为 i = 0），那么第2个元素延迟200毫秒，第3个延迟400毫秒，依次类推….整个动画的长度为 200*(10-1) + 1000 = 2800 毫秒。