D3 动态效果

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>

你可能感兴趣的:(D3)