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

Posted 2020-08-06 冷雨恋晴

  [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