D3.js学习笔记(3)--过渡效果

动态图表

transition()

代码示例：

.attr("fill","red")         //初始颜色
.transition()               //启动过渡
.attr("fill","steelblue")   //终止颜色
PS：transition 后可跟多个属性样式

duration()

过渡时长：

.attr("fill","red")         //初始颜色
.transition()               //启动过渡
.duration(1000)             //过渡时长
.attr("fill","steelblue")   //终止颜色

ease()

过渡方式：

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

linear示例

circle示例

elastic示例 

delay()

延迟执行

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