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

Question

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

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

我用于构建 d3-force 图的代码是样板代码。

按照我从内部 json 收集的数据并创建我调用的节点和链接对象

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

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

Answer 1

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

我以这种方式使用它，每次使用相同的数据集时我都会得到一致的位置。

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()，让强制定向为您对所有位置进行排序。