[6] D3.js中如何让图表动起来
浏览数：18 /
时间：2015年06月09日
本人的个人博客为： www.ourd3js.com
csdn博客为： blog.csdn.net/lzhlzz
转载请注明出处，谢谢。
[5.1]节中制作了一个比较完善的图表，但它是静态的，想做出它的动态效果吗？在D3中只需要短短的几行代码即可。
这一节将涉及4个函数的使用。
1.transition()
启动转变效果只需要添加这个即可。把它加到两种状态之间，例如：
.attr("fill","red")
.transition()
.attr("fill","steelblue")如上代码，上下两种属性 fill 的颜色不同，中间添加一行 .transition() ，表示要从红色变为蓝色，D3会自动对颜色之间的值进行线性插值，最终在动画中会看到平滑的颜色变化。
2.duration()
指定整个转变持续多少时间，单位为毫秒。如 .duration(2000) ，是持续2000毫秒，即2秒。
3.ease()
指定转变的方式，常用的转变方式有：
- linear 普通的线性变化
- circle 慢慢地到达变换的最终状态
- elastic 带有弹跳的到达最终状态
- bounce 在最终状态处弹跳几次
4.delay()
指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。这个函数可以对整体指定延迟，也可以对个别指定延迟。
对整体指定时，如：
.transition() .duration(1000) .delay(500)
这样指定，将会延迟500毫秒播放一个1000毫秒的动画，故整个动画长度为1500毫秒。
.transition()
.duration(1000)
.delay(funtion(d,i){
return 200*i;
})这样指定的话，假设有10个元素，那么第1个元素延迟200毫秒，第2个延迟400毫秒，依次类推….整个动画的长度为 200*10 + 1000 = 3000 毫秒。
要制作转变效果需要用到以上四个函数，实际使用时，通常形如：
.transition()
.duration(3000)
.ease("bounce")
.delay(function(d,i){
return 200*i;
})前后接转变效果的初始状态和目标状态。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
