D3 过渡 步骤流程整理 分4步

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

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

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

2.duration()
指定过渡的持续时间，单位为毫秒

3.ease()
常用4种

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

4.delay()
指定延迟的时间，表示一定时间后才开始转变,也可以对个别指定延迟。

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

或者

.delay(function(d, i){
    return 200*i;
});

追加实用方法
5.d3中获取svg中g标签的宽度高度使用

d3.select('g').getBBox().width