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