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

Question

所有 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 中的链接？是应用于模拟还是其他？

Answer 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 以更改链接距离。我编辑了原始代码以反射(reflect)这一点。请查看此链接:Link to Free Code Camp