我已经使用d3.jsv7构建了一个强制定向树布局。
这是我目前掌握的情况。

当我把一个节点拖向边缘时，子节点似乎被吸引到了中心，比如：

相反，我希望“负载平衡”的子节点如下所示：

以下是我设置模拟的方法：

const simulation = d3
  .forceSimulation()
  .force(
    "link",
    d3
      .forceLink()
      .id((d) => d.id)
      .distance(100)
      .strength(1)
  )
  .force("charge", d3.forceManyBody().strength(-500))
  .force("x", d3.forceX())
  .force("y", d3.forceY())
  .alphaDecay(0.05);

  simulation.on("tick", () => {
    link
      .attr("x1", (d) => d.source.x)
      .attr("y1", (d) => d.source.y)
      .attr("x2", (d) => d.target.x)
      .attr("y2", (d) => d.target.y);

    node.attr("transform", function (d) {
      return "translate(" + d.x + "," + d.y + ")";
    });
  });

我已经为这个here创建了一个工作Codepen，供您使用我所说的内容。
我试过将节点和连杆的力改变为不同的值，但效果不佳。我也试过禁用center力，但如果我这样做，模拟将不会出现在屏幕上。

.force("center").strength(0)

有什么方法可以达到我的要求吗？任何帮助都是感激不尽的。