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>