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

的dragstarted函數被調用於dragstart事件。在這種情況下，我應該停止此節點的拖動事件，但我不知道如何。我試過打電話

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 issue＃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

希望這可以幫助你！