chapter-6 transition
d3.select("body").transition()
.style("background-color", "black");
var data = [10,40,50,60];
var width = height = 500;
var canvas = d3.select('body')
.append('svg')
.attr('width',width)
.attr('height',height);
var circle = canvas.append('circle')
.attr('cx',50)
.attr('cy',50)
.attr('r',30)
circle.transition()
.duration(1500)
.delay(1000)
.each('start',function(){
d3.select(this).attr('fill','red')
})
.attr('cx',150)
.transition() //可以链式使用这个方法 等上一个动画完成的时候再执行下一个动画
.each('start',function(){
d3.select(this).attr('fill','purple')
})
.attr('cy',200)
.each('end',function(){
d3.select(this).attr('fill','orange')
})
.transition()
.attr('cx',50)
.each('end',function(){
d3.select(this).attr('fill','blue')
})
transion() 可以链式使用 上一个动画结束后开始下一个动画
each() 事件监听:start 动画开始 end动画结束
duration() 过度时间 默认500
ease() 指定过渡的方式,常用的有:
linear:普通的线性变化
circle:慢慢地到达变换的最终状态
elastic:带有弹跳的到达最终状态
bounce:在最终状态处弹跳几次
Last updated