D3 笔记五：过渡、transition、duration、ease、delay

1. 动态的图表，是指图表在某一时间段会发生某种变化，可能是形状、颜色、位置等，而且用户是可以看到变化过程的。而这个变化过程在 D3 里我们称之为过渡（transition）。

2. 实现动态的 API
   D3 提供了 4 个方法用于实现图形的过渡，即从状态 A 变为状态 B。

   1. transition()

      该 API 的功能为启动过渡效果。其前后是图形变化前后的状态（形状、位置、颜色等等），例如：

      .attr("fill","red")         //初始颜色为红色
      .transition()               //启动过渡
      .attr("fill","steelblue")   //终止颜色为铁蓝色

      D3 会自动对两种颜色（红色和铁蓝色）之间的颜色值（RGB值）进行插值计算，从而得到颜色值进行过渡。

   2. duration()

      该 API 的功能为指定过渡的持续时间，单位为毫秒。语法如下 duration(2000) ，指持续 2000 毫秒，即 2 秒。

   3. ease()

      该 API 的功能为指定过渡的变化方式，常用的有：

      • linear：普通的线性变化；
      • circle：慢慢地到达变换的最终状态；
      • elastic：带有弹跳的到达最终状态；
      • bounce：在最终状态处弹跳几次；

      语法形如： ease(“bounce”)。

   4. delay()

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

      1. 整体延迟语法：

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

      2. 个别指定延迟语法：

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