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

相关资源：python入门教程(PDF版)