D3 动态效果

最新推荐文章于 2024-09-26 07:55:00 发布

Claroja

最新推荐文章于 2024-09-26 07:55:00 发布

阅读量2.3k

点赞数 1

分类专栏： D3 文章标签：可视化

本文链接：https://blog.csdn.net/claroja/article/details/79868752

版权

D3 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

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>