d3 过渡

• 下定决心，好好过一天~

这里我的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>