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 + ")"; 
    });
}

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

有人可以给我建议吗？我可以看到如何创建静态图表，但它没有点击我的菜鸟头如何从中获取我的功能...小提琴总是最明显的例子/建议/答案。

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

Answer 2

在这里找到答案：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();
}

动态启动/停止d3.force

2 个答案: