javascript - 动态启动/停止 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 + ")"; 
    });
}

我想知道，是否可以动态停止/启动力？所以我可以移动节点，然后出于某种原因我会重新启用力，然后禁用它并移动东西(我知道启用力会扰乱我在禁用时创建的图表)。

有人能给我建议吗？我可以看到如何创建静态图，但它不适合我的菜鸟头如何从中派生我的功能...... fiddle 始终是最清晰的示例/建议/答案。

Answer 1

您可以通过将节点的 fixed 属性设置为 false/true 来从节点启动/停止 d3 强制。这是示例代码和 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; })           
    }
});