我是D3 js开发的新手。在链接(路径)到节点时,我遇到了问题。移动节点时,链接不随其移动。顺便说一句,我使用了d.fixed = true;在这个项目中。
这是附加的GIF,让你们看看问题是什么。
以下是JSFiddle的链接: Complete Code Here
这是我在拖动链接并在node.mouseover上连接时调用的函数。
function connectCurrentLink(d, data, targetL, sourceL) {
var destinationNode = JSON.parse(JSON.stringify(d));
if (destinationNode.id == targetL.id || destinationNode.id == sourceL.id) {
removeDraggableLine();
console.log("Drag to self id ");
return;
}
// check if what direction the arrow is
var arrowFromLeft = JSON.stringify(data['left']);
var source, target, direction;
if (arrowFromLeft == 'true') {
source = destinationNode;
target = targetL;
direction = 'left';
console.log("arrowFromLeft = " + arrowFromLeft +
" startingNode " + targetL.id + " destinationNode " + destinationNode.id);
} else {
source = sourceL;
target = d;
direction = 'right';
console.log("arrowFromLeft = " + arrowFromLeft +
" startingNode " + sourceL.id + " destinationNode " + destinationNode.id);
}
var link;
link = links.filter(function(l) {
return (l.source === source && l.target === target);
})[0];
if (link) {
link[direction] = true;
} else {
link = {
source: source,
target: target,
left: false,
right: false
};
link[direction] = true;
links.push(link);
}
console.log("Link " + JSON.stringify(link));
// hide the dragged arrow after connecting
drag_line
.style('marker-end', 'url(#end-arrow)')
.classed('hidden', true)
.attr('d', 'M' + destinationNode.x + ',' + destinationNode.y + 'L' + destinationNode.x + ',' + destinationNode.y);
removeDraggableLine();
}
function removeDraggableLine() {
d3.select("path.connect").remove();
selected_link = null;
hasHangingLink = false;
selected_node = null;
isDraggingLink = false;
isLinkTempDeletedAlready = false;
}