首页 > 代码库 > 【 D3.js 入门系列 --- 6 】 如何让图表动起来

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

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

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

1.transition()

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

 

[javascript] view plain copy
 
  1. .attr("fill","red")  
  2. .transition()  
  3. .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()

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

 

[javascript] view plain copy
 
  1. .transition()  
  2. .duration(1000)  
  3. .delay(500)  


    这样指定,将会延迟500毫秒播放一个1000毫秒的动画,故整个动画长度为1500毫秒。

 

 

[javascript] view plain copy
 
  1. .transition()  
  2. .duration(1000)  
  3. .delay(funtion(d,i){  
  4.     return 200*i;  
  5. })  


   这样指定的话,假设有10个元素,那么第1个元素不延迟(因为 i = 0),那么第2个元素延迟200毫秒,第3个延迟400毫秒,依次类推….整个动画的长度为 200*(10-1) + 1000 = 2800 毫秒。

 

 

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

 

[javascript] view plain copy
 
  1. .transition()  
  2. .duration(3000)  
  3. .ease("bounce")  
  4. .delay(function(d,i){  
  5.     return 200*i;  
  6. })  


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

 

 

本文来自:

博客为: www.ourd3js.com 

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

 

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