我正在尝试使用d3.js设计一个关联miminap。我的目标是根据数据定位不同的项目并使用拖动功能将它们关联起来。
我尝试计算到不同元素的距离,如果距离低于总半径,我认为这个条件是一个dragover。但是拖动功能会继续选择我拖动的节点而不是我拖动它的节点。
var drag = d3.behavior.drag()
.on('dragstart', function() {})
.on('drag', function(d) {
nodes=d3.select(this.parentNode).selectAll("circle")[0];
nodes.pop(this);
var minDist=1000;
for (i=0;i<nodes.length;i++) {
var currentNode=d3.select(nodes[i]);
var r1=parseInt(this.style.r);
var r2=parseInt(currentNode.style("r"));
var dx=d3.event.x-parseInt(currentNode.style("cx"));
var dy=d3.event.y-parseInt(currentNode.style("cy"));
var dist=Math.sqrt(dx*dx+dy*dy);
if(dist<(r1+r2)) {
d.con=currentNode.attr("id");
currentNode.style("fill","red");
console.log(currentNode[0][0]);
}
}
d3.select(this)
.style("cx",d3.event.x)
.style("cy",d3.event.y);
})
为什么我通过输入nodes.pop(this)
来移除我拖动的节点的徒劳尝试不起作用?
我添加了一个可编辑的codepen版本: https://codepen.io/TeaCult/pen/ezJVyz?editors=1111
感谢您的阅读。