D3力导向树拖拽父节点时如何阻止子节点向中心吸引

问题描述 #

基于d3.js v7搭建力导向树布局，整体基础功能运行正常，但存在交互异常，该问题在官方d3-force示例中也存在：

• 正常运行基础效果：
• 异常表现：将某一节点拖拽至画布边缘时，该节点的子节点会出现被画布中心吸引的偏移效果
  
• 期望效果：拖拽父节点时，节点的子节点可保持相对位置随父节点同步移动
  

现有实现代码 #

当前力导向仿真配置代码如下：

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 + ")";
    });
  });

已尝试的排查操作 #

• 调整节点力、链接力的多项参数取值，均未解决偏移问题
• 尝试将center力的强度设为0来禁用中心力，但禁用后整个仿真内容无法正常显示在画布中，对应配置代码如下：

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

• 已搭建可在线运行的复现环境，可直接体验上述异常交互。

诉求 #

需要可行的实现方案，达到拖拽父节点时子节点保持相对位置随父节点移动的交互效果，求相关解决思路。

内容的提问来源于stack exchange，提问作者David Heisnam