[6] D3.js中如何让图表动起来

标签：d3js   图表   移动   转变   transition   

    本人的个人博客为： www.ourd3js.com 

    csdn博客为： blog.csdn.net/lzhlzz 

    转载请注明出处，谢谢。

    [5.1]节中制作了一个比较完善的图表，但它是静态的，想做出它的动态效果吗？在D3中只需要短短的几行代码即可。

    这一节将涉及4个函数的使用。

1.transition()

    启动转变效果只需要添加这个即可。把它加到两种状态之间，例如：

.attr("fill","red")
.transition()
.attr("fill","steelblue")

2.duration()

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

3.ease()

    指定转变的方式，常用的转变方式有：

1. linear  普通的线性变化
2. circle  慢慢地到达变换的最终状态
3. elastic  带有弹跳的到达最终状态
4. bounce  在最终状态处弹跳几次

4.delay()

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

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

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

    要制作转变效果需要用到以上四个函数，实际使用时，通常形如：

.transition()
.duration(3000)
.ease("bounce")
.delay(function(d,i){
	return 200*i;
})

    实际效果可见： http://www.ourd3js.com/demo/transition.html

[6] D3.js中如何让图表动起来,布布扣,bubuko.com

[6] D3.js中如何让图表动起来

标签：d3js   图表   移动   转变   transition   

原文地址：http://blog.csdn.net/lzhlzz/article/details/35985907