D3.js 具有拖动/缩放/平移和连接节点功能的强制布局

Question

基本上，我想做的是合并这两个例子：

http://bl.ocks.org/mbostock/6123708

http://bl.ocks.org/benzguo/4370043

我想使用按键来选择是要拖动节点还是画线，如下所示：

function dragstarted( d ) {
    d3.event.sourceEvent.stopPropagation();

    if ( d3.event.sourceEvent.ctrlKey ) {
        // drag a line
    } else {
        // drag the node
    }
}

在dragstart 事件上调用dragstarted 函数。在这种情况下，我应该停止这个节点的拖动事件，但我不知道怎么做。我试着打电话

d3.select( this ).on('.drag', null);

没有结果。

另一种选择是使用此函数为每个节点订阅mousedown.drag：

function dragDecisor( d ) {
    if ( d3.event.ctrlKey ) {
        console.log( 'Draw a line...' );
    } else {
        console.log( 'Drag a node...' );
    }
}

但是我需要让拖动事件传播，似乎没有明确的方法来做到这一点。正如 mbostock 所述，我尝试创建一个事件（我无法发布更多链接，请参阅 d3 问题 #100）。

有什么建议吗？

Answer 1

我现在可以按住 ctrl 拖动节点。

我标记了一个名为 ctrlPressed 的标志

function mousedown() {
  if (!mousedown_node && !mousedown_link) {
    // allow panning if nothing is selected
    vis.call(d3.behavior.zoom().on("zoom"), rescale);
    return;
  }
    //marking the ctrlKey press flag
  if(d3.event.ctrlKey){
      ctrlPressed = true;
  } else {
      ctrlPressed = false;
  }
}

然后在鼠标移动中，如果按下 CTRL 键，我添加了创建和更新行的条件

function mousemove() {
  if (!mousedown_node) return;
  if(!d3.event.ctrlKey){
        // update drag line
  drag_line
      .attr("x1", mousedown_node.x)
      .attr("y1", mousedown_node.y)
      .attr("x2", d3.svg.mouse(this)[0])
      .attr("y2", d3.svg.mouse(this)[1]);
  } else {
    mousedown_node.x = d3.svg.mouse(this)[0];
    mousedown_node.y = d3.svg.mouse(this)[1];  
  }

}

我的工作小提琴here

希望对您有所帮助！