d3 过渡

最新推荐文章于 2025-11-10 10:09:16 发布

原创最新推荐文章于 2025-11-10 10:09:16 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#d3.js

d3 专栏收录该内容

14 篇文章

订阅专栏

这篇博客通过两个示例展示了如何在Vue框架中使用D3.js v7创建SVG动画。首先介绍了基本的矩形宽度变化动画，然后进阶到使用`attrTween`实现更复杂的动画效果，包括自定义插值函数和元素删除。示例代码详细解释了`transition`、`delay`、`duration`和`ease`等关键函数的用法，帮助读者理解D3.js的动画机制。

下定决心，好好过一天~

这里我的d3是v7版本，框架使用的是vue框架。可以只看methods中写的代码即可
源代码

<template>
  <div id="TransitionD3" width=600 height=600></div>
</template>

<script>
import * as d3 from "d3"
export default {
    name:"TransitionD3",
    mounted(){
        this.TransitionD3();
    },
    methods:{
        TransitionD3(){
            function idea_one(){
                var svgWidth = 600,svgHeight = 600;
                var svg = d3.select("#TransitionD3")
                            .append("svg")
                            .attr("width",svgWidth)
                            .attr("height",svgHeight);
                
                svg.append("rect")
                    .attr("fill","steelblue")
                    .attr("x",10)
                    .attr("y",10)
                    .attr("width",100)
                    .attr("height",30)
                    .transition()
                    .delay(1000)
                    .duration(2000)
                    .ease(d3.easeBounce)
                    .attr("width",300)
                    .transition()
                    .delay(1000)
                    .duration(2000)
                    .ease(d3.easeBack)
                    .attr("width",500);
            }

            function idea_two(){
                var svgWidth = 600,svgHeight = 600;
                var svg = d3.select("#TransitionD3")
                            .append("svg")
                            .attr("width",svgWidth)
                            .attr("height",svgHeight);
                
                var a = svg.append("rect")
                    .attr("fill","steelblue")
                    .attr("x",10)
                    .attr("y",10)
                    .attr("width",100)
                    .attr("height",30);

                var b = a.transition()
                    .delay(1000)
                    .duration(2000)
                    .ease(d3.easeBounce)
                    .attrTween("width",function(t){ //还有styleTween
                        // t为0到1
                        return t*400; //自定义插值函数，也可以用d3.interpolateRgb等
                    })
                    .transition()
                    .delay(1000)
                    .duration(2000)
                    .ease(d3.easeBack)
                    .attr("width",500)
                    .transition()
                    .attr('height',0)
                    .attr('width',0)
                    .remove();//删除
                //tween，styleTween和attrTween的底层
                //filter(function(d,i){return i>= 1;}) 过滤器，选用自己想要的元素
                //each("start",function(d,i){}) 开始
                //each("end",function(d,i){}) 结束
                //each("interrupt",function(d,i){}) 打断
            }

            idea_two();
        }
    }
}
</script>

<style>

</style>