transition()
.attr("fill","red") //初始颜色为红色
.transition() //启动过渡
.attr("fill","steelblue") //终止颜色为铁蓝色duration()
指定过度时间,单位毫秒
delay()
延迟
duration(2000)ease()
过度方式,”linear”,”circle”,”elastic”,”bounce”
实例
<html>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var svg =d3.select("body").append("svg")
.attr("width",400)
.attr("height",400)
var circle = svg.append("circle")
.attr("cx", 50) //初始位置
.attr("cy", 50)
.attr("r", 50) //初始半径
.style("fill","green");
//将颜色从绿色变为红色
//将半径从45变成25
//过渡方式采用bounce（在终点处弹跳几次）
circle.transition()
.duration(2000) //变化时间是2s
.ease("bounce") //变换之后跳动
.attr("cx", 300) //变换之后移动到x坐标为300
.style("fill","red") //变换之后为红色
.attr("r", 20); //变换之后的半径
</script>
</body>
</html>
668
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
