【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 毫秒。

上一篇:【D3.js 学习总结】3、D3选择器


下一篇:【D3.js 学习总结】4、D3 创建SVG