- 下定决心,好好过一天~
这里我的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>