如何使 D3 Force Directed Graph 每次都在相同位置生成节点

Question

当我在 d3.js 力方向上调用 d3.start() 时，我生成了一个在特定位置具有节点和边的图形。但是，当我用相同的数据再次调用 start 时，节点的定位与以前不同。有没有办法让节点每次都定位在相同的位置？

我是否绝对设置了第一个节点的位置，然后每次都以某种方式相对于第一个节点的位置进行定位？谢谢。

我构建 d3-force 图的代码是样板文件。

然后从我的内部 json 收集数据并创建我调用的节点和 link 对象

setTimeout(function(){
    var n = node.size();
    node.forEach(function(d, i) {
      d.x = d.y = width / n * i;
    });
    console.log(node);
    setTimeout(function(){
      force.start();
      for (var i = 0; i < n; ++i) force.tick();
      force.stop();
    },300);
},100);

其中 node 是我用于节点的圆对象数组...而且当我第一次调用 start 时，节点似乎并没有沿着对角线初始化。有什么想法吗？谢谢！

Answer 1

根据 d3 文档，将节点沿对角线对齐，在大多数情况下，力导向算法将以最少的迭代次数平衡节点位置。

我就是这样使用的，每次使用相同的数据集我都得到一致的位置。

The number of iterations depends on the graph size and complexity. The choice of initial positions can also have a dramatic impact on how quickly the graph converges on a good solution. For example, here the nodes are arranged along the diagonal:

var n = nodes.length;
nodes.forEach(function(d, i) {
  d.x = d.y = width / n * i;
});

来自： https://github.com/mbostock/d3/wiki/Force-Layout

这意味着设置节点的位置是多余的。在您完成与上述代码类似的操作后，通过调用 .start() 让力定向为您排序所有位置。

Answer 2

是的，很简单，就是按照第一个位置布局，恢复x和y，然后再强制布局

data.forEach((e)=>{
  e.x = e.firstX
  e.y = e.firstY
})

layout(data)

如何使 D3 Force Directed Graph 每次都在相同位置生成节点

How to make it so D3 Force Directed Graph generates nodes in same position each time

javascript

d3.js

graph

coordinates