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

Надеюсь, это вам поможет!