d3交互（拖拽事件）

最新推荐文章于 2024-04-04 02:06:01 发布

原创最新推荐文章于 2024-04-04 02:06:01 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#d3.js

d3 专栏收录该内容

14 篇文章

订阅专栏

本文展示了如何在Vue项目中使用D3.js v7创建一个可拖拽的圆形元素。代码中创建了一个SVG元素，并为两个圆形绑定拖拽事件监听器，分别在拖动开始、进行和结束时打印对应信息。尽管拖拽功能已实现，但元素的位置并未在拖动时更新。

下定决心，好好过一天~

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