Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js">></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var width = 400; //SVG绘制区域的宽度
var height = 400; //SVG绘制区域的高度
var svg = d3.select("body") //选择<body>
.append("svg") //在<body>中添加<svg>
.attr("width", width) //设定<svg>的宽度属性
.attr("height", height);//设定<svg>的高度属性
var circles = [ { cx: 150, cy:200, r:30 },
{ cx: 250, cy:200, r:30 }];
var drag = d3.behavior.drag() //创建一个拖拽行为
.origin(function(d,i){ //设置起点坐标
return {x: d.cx ,y: d.cy } //起点坐标为被拖动物体的圆心坐标
})
.on("dragstart", function(d){ //dragstart的监听器
console.log("拖拽开始");
})
.on("dragend", function(d){ //dragend的监听器
console.log("拖拽结束");
})
.on("drag", function(d){ //drag的监听器
console.log(d3.event);
d3.select(this) //选择当前被拖拽的元素
//将d3.event.x赋值给被绑定的数据,再将cx属性设置为该值
.attr("cx", d.cx = d3.event.x )
//将d3.event.y赋值给被绑定的数据,再将cy属性设置为该值
.attr("cy", d.cy = d3.event.y );
});
svg.selectAll("circle")
.data(circles) //绑定数据
.enter()
.append("circle")
.attr("cx",function(d){ return d.cx; })
.attr("cy",function(d){ return d.cy; })
.attr("r",function(d){ return d.r; })
.attr("fill","black")
.call(drag); //调用drag函数
</script>
</body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js