d3交互 （拖拽事件）

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

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

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

<script>
import * as d3 from "d3"
export default {
    
    
    name:"DragD3",
    mounted(){
    
    
        this.DragD3();
    },
    methods:{
    
    
        DragD3(){
    
    
            var svgWidth = 600,svgHeight = 600;
            var svg = d3.select("#DragD3")
                        .append("svg")
                        .attr("width",svgWidth)
                        .attr("height",svgHeight);
            
            var circles = [{
    
    
                cx:150,cy:200,r:30
            },{
    
    
                cx:250,cy:200,r:30
            }];

            var drag = d3.drag()
                        // .origin(function(d,i){
    
    
                        //     return {x:d.cx,y:d.cy};
                        // })
                        .on("start",function(d){
    
    
                            console.log("开始");
                        })
                        .on("drag",function(d){
    
    
                            console.log("拖拽中");
                        })
                        .on("end",function(d){
    
    
                            console.log("结束");
                        });
                        //这里我没有设置改变位移，但是有输出
            
            svg.selectAll("circle")
                .data(circles)
                .enter()
                .append("circle")
                .attr("cx",function(d,i){
    
    
                    return d.cx;
                })
                .attr("cy",function(d,i){
    
    
                    return d.cy;
                })
                .attr("r",function(d,i){
    
    
                    return d.r;
                })
                .attr("fill","steelblue")
                .call(drag);
        }
    }
}
</script>

<style>

</style>