如何使用 d3 v4 设置固定链接距离

Posted 2023-02-22

【中文标题】如何使用 d3 v4 设置固定链接距离

【英文标题】：how do you set a fixed link distance with d3 v4

【发布时间】：2017-01-07 17:22:36

【问题描述】：

所有 API 示例似乎仍然适用于 v3。 我试图了解如何使用固定距离的链接创建力图，例如： http://bl.ocks.org/d3noob/5141278

我查看了 link_distance 但不知道如何应用它： https://github.com/d3/d3-force/blob/master/README.md#link_distance

创建这样的图表：

  let simulation = d3.forceSimulation()
      .force("link", d3.forceLink().id(function(d)  return d.id; ))
      .force("charge", d3.forceManyBody().strength(-150))
      .force("center", d3.forceCenter(width / 2, height / 2));

我尝试了各种组合，例如：

  // .force("link", d3.forceLink().distance(20).strength(1))
  // .force("linkDistance", 20)
  // .force("link", d3.forceLink().id(function(d)  return d.id; ))

但没有运气！

所以看起来 link_distance 无法修复？ 这是力量和（距离，不管是什么）的结果

那么如何将 strength 和 distance 应用于 d3 v4 中的链接？ 是应用于模拟还是其他？

【问题讨论】：

D3 v3 和 v4 都没有固定链接距离。看看我的answer 到"d3.js linkStrength influence on linkDistance in a force graph" 以获得对 v3 的解释。尽管发生了很大的变化，尤其是在部队布局方面，但同样的原则也适用于 v4。如果链接看起来具有相同的长度，这是偶然的，并且主要受周围其他参数和力的影响。

好的，谢谢。但我仍然不清楚如何使用 v4 API 设置 linkDistance 或 linkStrength 命令。我是把这些设置在d3.forceSimulation 还是其他东西上？

是的，寻找 v4 和 v3 有点挑战。我会推荐两件事：1）仅在 blockbuilder.org/search#d3version=v4 上搜索 V4（直到很晚才找到）。 2）我的非平凡 d3 力图：bl.ocks.org/bill-mybiz/dfe5b70ad9b469e23b8820790fa53109。我这样做是为了一个重要的参考实现，因为不断遇到 v3 文档有点令人沮丧。它使用节点组（不仅仅是简单的圆圈）、es6 类结构等来动态添加/删除节点。它包括设置距离，以及一系列其他设置。

【参考方案1】：

在 v4 中你更接近于改变距离！检查此更改...它对我有用：

    var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d, i)  return i; ).distance(100).strength(1))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

原始代码几乎是正确的。但是，需要将i 添加到函数中，并且还需要返回i 才能更改链接距离。我编辑了原始代码以反映这一点。请看这个链接：Link to Free Code Camp

【参考方案2】：

你快到了...检查一下，这段代码对我有用..

注意：我使用此代码根据节点标签动态获取链接长度 GetNodeDefaults(d.label).linkDistance 即，它可以是 100 或 200或 300 等，

var forceLink = d3
    .forceLink().id(function (d) 
        return d.id;
    )
    .distance(function (d) 
        return GetNodeDefaults(d.label).linkDistance;
    )
    .strength(0.1);

var simulation = d3.forceSimulation()
    .force("link", forceLink)
    .force("charge", d3.forceManyBody().strength(function (d, i) 
        var a = i == 0 ? -2000 : -1000;
        return a;
    ).distanceMin(200).distanceMax(1000))
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force("y", d3.forceY(0.01))
    .force("x", d3.forceX(0.01))
    .on("tick", ticked);

【参考方案3】：

您可以尝试不使用force('center')

let simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(function(d)  return d.id; ))
  .force("charge", d3.forceManyBody().strength(-150));