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...' );
    }
}

但是我需要让drag事件传播，似乎没有一个明确的方法来做到这一点。我尝试创建一个事件，正如 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

希望这能帮到你！

D3.js使用拖动/缩放/平移强制布局并加入节点功能

1 个答案: