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];  
  }

}

我的工作在这里

希望这对您有所帮助！