Пуск/остановка d3.force динамически

Question

Скажем, у меня простая диаграмма силы D3.js, как в этом примере here. Я знаю, что все волшебство силы происходит, в основном, в этой функции здесь:

function tick() { 
    path.attr("d", function(d) { 
    var dx = d.target.x - d.source.x, 
     dy = d.target.y - d.source.y, 
     dr = Math.sqrt(dx * dx + dy * dy); 
    return "M" + 
     d.source.x + "," + 
     d.source.y + "A" + 
     dr + "," + dr + " 0 0,1 " + 
     d.target.x + "," + 
     d.target.y; 
    }); 

    node 
    .attr("transform", function(d) { 
     return "translate(" + d.x + "," + d.y + ")"; 
    }); 
} 

мне было интересно, будет ли возможность динамически остановить/запустить силу? Поэтому я мог перемещать узлы, а потом по какой-то причине я включил бы силу, а затем отключил бы ее и перемещал бы все вокруг (им известно, что включение силы будет скрещивать мою диаграмму, созданную ive, когда она была отключена).

Может ли кто-нибудь дать мне совет? Я могу видеть, как создать статическую диаграмму, но она не нажимает на мою голову noob, как извлечь из нее мою функциональность ... скрипка всегда является самым ярким примером/предложением/ответом.

Answer 1

Найдено ответ здесь: http://bl.ocks.org/norrs/2883411

var node_drag = d3.behavior.drag() 
    .on("dragstart", dragstart) 
    .on("drag", dragmove) 
    .on("dragend", dragend); 

function dragstart(d, i) { 
    force.stop() // stops the force auto positioning before you start dragging 
} 

function dragmove(d, i) { 
    d.px += d3.event.dx; 
    d.py += d3.event.dy; 
    d.x += d3.event.dx; 
    d.y += d3.event.dy; 
    tick(); // this is the key to make it work together with updating both px,py,x,y on d ! 
} 

function dragend(d, i) { 
    d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff 
    tick(); 
    force.resume(); 
} 

Answer 2

Вы можете запустить/остановить силу d3 из узлов, установив значение fixed свойства узлов в false/true. Вот пример кода и JSFiddle

d3.select(".toggleButton").on("click",function(){ 
    var val = d3.select(this).attr("value"); 
    if(val=="Disable Force"){ 
     d3.select(this).attr("value","Enable Force"); 
     circle.each(function(d){ d.fixed= true; })      
    }else{ 
     d3.select(this).attr("value","Disable Force"); 
     circle.each(function(d){ d.fixed= false; })   
    } 
});