实现基于D3.js的图形动态变化

在开发过程中遇到需要加载大量图形数据，并支持图形自动变换形状颜色等需求，即图形在某一时间段内发生某种变化，可能是形状、颜色、位置等，而且用户是可以看到变化过程的。而这个变化过程在D3里我们称之为过渡。
       D3提供了4个方法用于实现图形的过渡，即从状态A变为状态B。
1、transition()
该API的功能为启动过渡效果。其前后是图形变化前后的状态（形状、位置、颜色等等），D3会自动对两种颜色（红色和铁蓝色）之间的颜色值（RGB值）进行插值计算，从而得到颜色值进行过渡。

该例子中，矩形（长：10，宽：20，填充色：红色），均匀缓慢变为矩形（长：200，宽：20，填充色：黄色）
2、duration()
该API的功能为指定过渡的持续时间，单位为毫秒。语法如下duration(40000)，指持续40000毫秒。
该例子中，矩形（长：10，宽：20，填充色：红色）在40秒内，均匀缓慢变为矩形（长：200，宽：20，填充色：黄色）

3、ease()
该API的功能为指定过渡的变化方式，常用的有：
easeLinear：普通的线性变化；
easeCircle：慢慢地到达变换的最终状态；
easeElastic：带有弹跳的到达最终状态；
easeBounce：在最终状态处弹跳几次；
语法为ease(d3.easeBounce)

4、delay()
指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。此函数可以对整体指定延迟，也可以对个别指定延迟。

同上例子，在延迟1秒后，开始图形缓慢均匀变换。