【 D3.js 入门系列 --- 6 】 如何使移动图表

我的个人博客是： 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()

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

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

调用时，形如： .ease(“bounce”)

4.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 毫秒。

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

.transition()

.duration(3000)

.ease("bounce")

.delay(function(d,i){

	return 200*i;

})

前后接转变效果的初始状态和目标状态。

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