javascript - d3.js svg パスの描画は許可されていません

Question

こんにちは、私はこのコードを持っています: https://jsfiddle.net/fa765d2o/1/

(dagre-d3 プラグインに貼り付けなければならなかった js の部分については申し訳ありませんが、それを機能させる他の方法を知りませんでした)

だから私はd3.jsとdagre-d3を使って組織図を作成します。新しい関係を作成する機能の追加に取り組んでいます。

これは、ノードの 1 つをクリックして別のノードにドラッグし、マウスを放すことで機能します。2 つのノードが接続され、グラフが更新されます。

問題は、1回目以降はうまくいかないので、「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);