javascript - 如何在 D3 Force 布局中组织节点位置

Question

我有一个图，它可能有 1000 个具有非常嵌套结构的节点，所以当我单击一个节点时，它会添加更多子节点，依此类推。有些 child 可以有多个 parent ，有些 child 可以有不同 parent 的 sibling 。我放了一个简单的 fiddle在一起演示我到目前为止所获得的内容，为简洁起见，仅使用 2 个级别的数据。

这是我的模拟设置...

var simulation = d3.forceSimulation(mergedData.nodes)
  .velocityDecay(0.55)
  .force('charge', d3.forceManyBody().strength(-100).distanceMin(10000))
  .force('collide', d3.forceCollide(25))
  .force('link', d3.forceLink(mergedData.links)
     .id((d) => { return d.id; })
     .distance(400)
     .strength(0.1)
  )
  .force('y', d3.forceY(height / 2))
  .force('x', d3.forceX(width / 2))
  .on('tick', ticked);

我正在尝试安排节点的布局，以便父 > 子关系更加清晰。理想情况下，我想为用户提供 2 个选项，一个树结构和一个径向/分组结构，如下所示:

我真的很想知道我是怎么做到的，所以非常感谢任何帮助。

谢谢!

附言我正在使用 v4 API

Answer 1

您可以使用 d3.forceY 组织节点，如左图所示。 ，其中:

Creates a new positioning force along the y-axis towards the given position y.

因此，使用您的代码，您可以在垂直坐标中将红色圆圈定位在 100 处，将灰色圆圈定位在 300 处:

.force("yPosition", d3.forceY(function(d){
    return d.r === 20 ? 100 : 300
}).strength(2))

我使用的 strength 高于推荐值(介于 0 和 1 之间)，只是为了使圆在 y 位置更好地对齐。

这是您更新的 fiddle :https://jsfiddle.net/rLf054zy/

PS:我更改了你的 mergedData 数组，它没有正确合并 d1 和 d2。