Question

（抱歉我必须粘贴在dagre-d3插件中的js部分，并不知道任何其他方式使其工作）

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

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

问题是，在第一次第二次它不能工作之后，所以如果我连接＆＃34; Drone-3＆＃34;到＆＃34;无人机-7＆＃34;它会起作用，但之后如果我想连接＆＃34; Drone-3＆＃34;它对任何人都不会让我和我得到＃34;不允许＆＃34;光标。

这基本上是代码的重要部分......神奇的地方发生了：）

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);

d3.js svg路径绘图不允许

0 个答案: