【 D3.js 入门系列 --- 6 】 如何让图表动起来

  [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;
})

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

 

 

本文来自：

博客为： www.ourd3js.com 

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