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) { return d.id; }).distance(100).strength(1))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

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

Answer 3

您可以在没有force('center')

的情况下尝试

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

如何设置与d3 v4的固定链接距离

3 个答案: