D3 提供了 4 个方法用于实现图形的过渡：

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

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

指定过渡的持续时间单位为毫秒。

指定过渡的方式常用的有：

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

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

　　如此图形整体在延迟 500 毫秒后发生变化，变化的时长为 1000 毫秒因此，过渡的總时长为1500毫秒

又如，对一个一个的图形（图形上绑定了数据）进行指定时：

　　如此假设有 10 个元素，那么第 1 个元素延迟 0 毫秒（因为 i = 0）第 2 个元素延迟 200 毫秒，第 3 个延迟 400 毫秒依次类推….整个过渡的长度为 200 * 9 + 1000 = 2800 毫秒。

1. 实现简单的动态效果

下面将在 SVG 画布里添加三个圆圆出现之后，立即启动过渡效果

- 第一个圆，要求移动 x 坐标

- 第二个圆要求既移动 x 坐标，又改变颜色

- 第三个圆，要求既移动 x 坐标又改变颜色，还改变半径