1

我有这个代码：https ://jsfiddle.net/fa765d2o/1/

（对不起，我不得不粘贴在 dagre-d3 插件中的 js 部分，不知道任何其他方法可以使它工作）

所以我使用 d3.js 和 dagre-d3 来创建一个组织结构图，这很有效。我正在努力添加一个功能来创建新的关系。

这通过单击其中一个节点并拖动到另一个节点并释放鼠标来实现，它将连接两个节点并刷新图形。

问题是在第一次之后第二次它不会工作，所以如果我将“Drone-3”连接到“Drone-7”它会工作但在那之后如果我想将“Drone-3”连接到其他任何人它不会让我，我得到“不允许”光标。

这基本上是代码的重要部分......魔术发生的地方:)

d3.selectAll('svg g.node')
.on('mousedown', function(d) {
    console.log(d);
    // Prevent svg canvas movement
    d3.event.stopPropagation();

    // Define node position
    mousedown_node = d;
    md_node = g.node(d);
    md_node_x = md_node.x;
    md_node_y = md_node.y;

    drag_line.style('marker-end', 'url(#end-arrow)');        
})
.on('mouseover', function(d) {

    // Source and target node the same
    if(!mousedown_node || d === mousedown_node)
    {

    }
    else // Source and target node different
    {
        // Show hover state
        d3.select(this).classed('node-connect-hover', true);
    }        

})
.on('mouseout', function(d) {        
    // Remove hover state
    d3.select(this).classed('node-connect-hover', false);
})
.on('mouseup', function(d) {        
    // Do nothing if the source and target node is the same
    if(!mousedown_node || d === mousedown_node) return;

    // Set up realation 
    g.setEdge(mousedown_node, d);

    // Refresh the graph
    render(container, g);        
});


/**
 * Draw the path on mouse movement
 */
function mousemove() {

    if(!mousedown_node) return;

    var xn = translateXY[0] + md_node_x * d3Scale,
        yn = translateXY[1] + md_node_y * d3Scale;

    drag_line.classed('hidden', false)
             .attr('d', 'M' + xn + ',' + yn + 'L' + d3.mouse(this)[0] + ',' +  d3.mouse(this)[1]);
}

/**
 * Hide the path on mouse up
 */
function mouseup() {

    if(mousedown_node)
    {      
      // hide drag line
      drag_line.classed('hidden', true)
               .style('marker-end', '');
    }

    // because :active only works in WebKit?
    svg.classed('active', false);

    // clear mouse event vars
    resetMouseVars();
}


/**
 * Attach event listeners to the svg
 */
svg.on('mousemove', mousemove)
   .on('mouseup', mouseup);
4

0 回答 0