显示力图后禁用力

Question

我正在绘制有向图：JSBin。我希望图表最初显示为力，但随后用户可以自由移动节点。有两种选择，任何一种都适合我：

1) 一旦图形显示，我希望能够将任意节点拖动到任意位置，force不介入；链接长度会自动调整

2) 显示图形后，我希望能够拖动节点，链接的长度始终保持不变，但我不希望 force进行干预自动改变其他节点的位置

我尝试修改.charge(-300)，但效果不佳，冷有人帮忙吗？

编辑 1：

我添加了 force.nodes([])：JSBin，但它没有按预期工作...

Answer 1

要手动停止力导向图，您只需调用 force.stop()。

您所描述的是在您进行任何更改时阻止力重新运行。有几种方法可以做到这一点，我认为最好的方法可能是 "detatch" 来自力导向图的节点。

要做到这一点，只需调用 force.nodes([])。现在力导向图正在处理一个空图，您可以继续使用您的节点。要在您想要的初始布局之后执行此操作：

force.on("end", function() {
    force.nodes([]);
});

Answer 2

我要解决这个问题：

1) 一旦图形显示出来，我希望能够将任意节点拖动到任意位置，力不介入；链接长度会自动调整

第一个：

当你将矩形或圆形作为节点时，然后像这样给它一个 class：

var circlesOrRects = svg.append("g").selectAll(".foo")
.data(force.nodes())
.enter()
.append("path")
.attr("class", "foo")//give it a class

下一步力向图停止后，如下图修复节点：

var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(150)
    .charge(-300)
    .on("tick", tick)
    .start()
    .on("end", function(p) {
      //using the class for selecting nodes.
      d3.selectAll(".foo").each(function(d){
        d.fixed=true;//thsi will fix the node.
      });
    });

现在，在力停止后，您可以将节点拖动到任何地方。

请注意，end 事件将在力 alpha 变为 0 时触发，然后节点才会固定。

工作代码here

显示力图后禁用力

Disable forces once a force graph is displayed

d3.js

force-layout