【问题标题】:How to make it so D3 Force Directed Graph generates nodes in same position each time如何使 D3 Force Directed Graph 每次在相同位置生成节点
【发布时间】:2015-01-12 04:11:26
【问题描述】:

当我在 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);

其中 node 是我用于节点的圆形对象数组...此外,当我第一次调用 start 时,节点似乎没有沿对角线初始化。有什么想法吗?谢谢!

【问题讨论】:

    标签: javascript d3.js graph coordinates


    【解决方案1】:

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

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

    迭代次数取决于图的大小和复杂性。初始位置的选择也会对图形收敛到一个好的解决方案的速度产生巨大影响。例如,这里的节点是沿对角线排列的:

    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() 让强制为您排序所有位置。

    【讨论】:

    • 嗨,我已经将此代码添加到我的代码中,但每次仍然产生不同的结果。节点似乎不是沿对角线初始化的,所以我仍然感到困惑。我附上了我在上面添加的新代码。谢谢!
    • 嘿,您能否还显示初始化强制行为并使用节点和链接提供给它的代码?我怀疑问题可能出在那儿
    • @user3014093 感谢您批准我的回答,但如果可能的话,我还是想看看哪里出了问题。
    • 我的费用设置为非常高的值,这导致了很多额外的随机性。因此,当我纠正定位与每一代图形非常相似时。
    【解决方案2】:

    是的,根据第一个位置进行布局很简单,在下一次强制布局之前恢复xy

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

    【讨论】:

      猜你喜欢
      • 2017-06-18
      • 2015-03-18
      • 1970-01-01
      • 1970-01-01
      • 2012-01-28
      • 2017-10-10
      • 2013-04-27
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多