d3散点图 + 过渡

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

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

<template>
  <div id="ScatterChartsTransitionD3" width=600 height=600>
    <button type="button" class="Button" onclick="update()">更新</button>
    <button type="button" class="Button" onclick="add()">添加</button>
    <button type="button" class="Button" onclick="sub()">删除</button>
  </div>
</template>

<script>
import * as d3 from "d3"
export default {
    name:"ScatterChartsTransitionD3",
    created(){

    },
    mounted(){
        this.ScatterChartsTransitionD3();
    },
    methods:{
        ScatterChartsTransitionD3(){
            var dataAll = [[1,2],[2,3],[5,6],[8,8],[1,3],[5,6],[4,4],[7,1]];
            var padding = {top:30,left:30,bottom:30,right:30};
            var svgWidth = 600;
            var svgHeight = 600;
            var circleRadius = 5;
            var svg = d3.select("#ScatterChartsTransitionD3")
                        .append("svg")
                        .attr("width",svgWidth)
                        .attr("height",svgHeight);

            var xScale = d3.scaleLinear()
                            .domain([0,1.2*d3.max(dataAll,function(d){
                                return d[0];
                            })])
                            .range([0,svgWidth]);
            
            var yScale = d3.scaleLinear()
                            .domain([0,1.2*d3.max(dataAll,function(d){
                                return d[1];
                            })])
                            .range([0,svgHeight]);
            
            function drawUpdateCharts(){
                var updateCharts = svg.selectAll("circle")
                                        .data(dataAll)
                
                var enterCharts = updateCharts.enter();
                var exitCharts = updateCharts.exit();

                updateCharts.transition()
                            .delay(500)
                            .duration(2000)
                            .attr("cx",function(d,i){
                                return xScale(d[0]);
                            })
                            .attr("cy",function(d,i){
                                return svgHeight - padding.bottom - yScale(d[1]);
                            })
                            .attr("r",circleRadius)

                enterCharts.append("circle")
                            .attr("fill","white")
                            .attr("cx",function(d,i){
                                return xScale(0);
                            })
                            .attr("cy",function(d,i){
                                return svgHeight - padding.bottom - yScale(0);
                            })
                            .attr("r",0)
                            .transition()
                            .delay(500)
                            .duration(2000)
                            .attr("fill","black")
                            .attr("cx",function(d,i){
                                return xScale(d[0]);
                            })
                            .attr("cy",function(d,i){
                                return svgHeight - padding.bottom - yScale(d[1]);
                            })
                            .attr("r",5)
                
                exitCharts.transition()
                            .delay(500)
                            .duration(2000)
                            .attr("fill","white")
                            .remove();
            }

            function drawUpdateChartsText(){
                var updateChartsText = svg.selectAll("text")
                                            .data(dataAll);
                var enterChartsText = updateChartsText.enter();
                var exitChartsText = updateChartsText.exit();

                updateChartsText.transition()
                                .delay(500)
                                .duration(2000)
                                .attr("x",function(d,i){
                                    return xScale(d[0]);
                                })
                                .attr("y",function(d,i){
                                    return svgHeight - padding.bottom - yScale(d[1]);
                                })
                                .attr("dx",circleRadius*5)
                                .attr("dx",14*2)
                                .text(function(d){
                                    return "(" + d[0] + "," + d[1] + ")";
                                });

                var entertransition = enterChartsText.append("text")
                                .attr("fill","white")
                                .attr("font-size","0px")
                                .attr("text-anchor","middle")
                                .attr("x",function(d,i){
                                    return xScale(0);
                                })
                                .attr("y",function(d,i){
                                    return svgHeight - padding.bottom - yScale(0);
                                })
                                .attr("dx",circleRadius*5)
                                .attr("dx",14*2)
                                .text(function(d){
                                    return "(" + d[0] + "," + d[1] + ")";
                                })
                
                entertransition.transition()
                                .delay(500)
                                .duration(2000)
                                .attr("fill","green")
                                .attr("font-size","14px")
                                .attr("x",function(d,i){
                                    return xScale(d[0]);
                                })
                                .attr("y",function(d,i){
                                    return svgHeight - padding.bottom - yScale(d[1]);
                                })
                                .attr("dx",circleRadius*5)
                                .attr("dx",14*2)
                                .text(function(d){
                                    return "(" + d[0] + "," + d[1] + ")";
                                })
                
                exitChartsText.transition()
                                .delay(500)
                                .duration(2000)
                                .attr("fill","white")
                                .remove();
            }

            function drawAxis(){
                var xAxis = d3.axisBottom()
                                .scale(xScale);

                yScale.range([svgHeight,0]);
                var yAxis = d3.axisLeft()
                                .scale(yScale);
                
                svg.append("g")
                    .attr("class","axis")
                    .attr("transform","translate(" + padding.left + "," + (svgHeight - padding.bottom) + ")")
                    .call(xAxis);
                
                svg.append("g")
                    .attr("class","axis")
                    .attr("transform","translate(" + padding.left + "," + -1*padding.bottom + ")")
                    .call(yAxis);
                
            }
            
            drawUpdateCharts();
            drawUpdateChartsText();
            drawAxis();
        }
    }
}
</script>

<style>

</style>