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

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

我想使用按键来选择是否要拖动节点或绘制一条线，类似这样：

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。使用此功能拖动
：

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

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

有什么建议吗？
我现在可以在按住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];  
  }

}

我的工作小提琴

希望这对你有帮助
 酷！我没有意识到第二个例子使用的是D3V2。对于v3，我遇到了一些问题，因为我似乎无法在vis对象上使用调用函数。你知道怎么解决吗？是的，真的V3有一些我无法解决的问题：）