D3笔记（一）：过渡动画效果及循环

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

4.1. 整体延迟语法：

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

4.2 个别指定延迟语法：

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

无限循环

利用d3.js的 transition实现无限循环。在循环结束后添加一个回调，无限循环就回调自己就可以了。·.on('end,funame),。下面通过d3在body中添加了一个div。然后让他一直左右移动。

let di = d3.select('body')
             .append('div')
             .text('无限循环动画')
 let run = () => {
     di.transition()
         .duration(1000)
         .delay(200)
         .ease(d3.easePolyInOut)
         .style("transform", "translate(0px, 0px)")
         .transition()
         .duration(1000)
         .delay(200)
         .ease(d3.easePolyInOut)
         .style("transform", "translate(100px, 0px)")
         .on('end', run)
 }
 run()
``