Javascript 如何在D3部队布局中组织节点位置

我有一个图，它可能有1000个嵌套结构的节点，所以当我单击一个节点时，它会添加更多的子节点，以此类推。有些孩子可以有多位父母，有些孩子可以有不同父母的兄弟姐妹。我已经把一个简单的例子放在一起演示了我到目前为止所得到的，为了简洁起见，只有两个级别的数据

这是我的模拟设置

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，您可以像左图中那样组织节点，使用：

沿y轴向给定位置y创建新的定位力

因此，使用您的代码，您可以在垂直坐标中将红色圆圈定位为100，将灰色圆圈定位为300，如下所示：

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

我使用的

强度

高于推荐值（介于0和1之间），只是为了使圆在y位置更好地对齐

这是你最新的小提琴：

---

PS：我更改了您的

mergedData

数组，该数组未正确合并

d1

和

d2

谢谢！单击红色圆圈后，数据正在合并，但您的更新使其更加明显。也谢谢你的回答。我一直在处理tick函数中的节点

cx

和

cy

属性，运气不太好。@DanV抱歉，我错过了那个事件处理程序。关于

cx

和

cy

属性，您可以将

d3.forceX/Y

与scales组合。例如，这是我结合他们制作的一张力指向图：再次感谢@Gerardo！那真的很有帮助。我会给你一个绿色的勾号，但我想先得到更多的回应，希望能对其他布局有所了解。