Bounded Force Layout关联节点越界及拖拽节点边界限制问题咨询

看起来你已经在尝试限制拖拽节点的位置，但关联节点还是会跑出布局范围对吧？这是因为你只约束了被拖拽节点的位置，而其他节点在力导向模拟的作用下，依然会因为斥力、引力等跑出边界。另外，我注意到你代码里dragged函数的fy行拼写错了——Mat应该是Math，先把这个小问题修正。

下面是完整的解决方案，核心是在力模拟的tick事件中，对所有节点的位置进行边界约束：

// 修正后的拖拽开始函数
function dragstarted() {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  // 初始拖拽时就约束被拖拽节点的位置
  d3.event.subject.fx = Math.max(10, Math.min(width - 10, d3.event.subject.x));
  d3.event.subject.fy = Math.max(10, Math.min(height - 10, d3.event.subject.y));
}

// 修正拼写错误后的拖拽中函数
function dragged() {
  d3.event.subject.fx = Math.max(10, Math.min(width - 10, d3.event.x));
  d3.event.subject.fy = Math.max(10, Math.min(height - 10, d3.event.y));
}

// 拖拽结束函数（可选，控制节点后续是否继续受力模拟）
function dragended() {
  if (!d3.event.active) simulation.alphaTarget(0);
  // 如果需要拖拽后保持节点固定，注释掉下面两行；若要让节点继续运动则保留
  d3.event.subject.fx = null;
  d3.event.subject.fy = null;
}

// 关键：在tick事件中约束所有节点的位置
simulation.on("tick", () => {
  node.attr("cx", d => {
    // 限制x坐标在10到width-10的内边距范围内
    d.x = Math.max(10, Math.min(width - 10, d.x));
    return d.x;
  }).attr("cy", d => {
    // 限制y坐标在10到height-10的内边距范围内
    d.y = Math.max(10, Math.min(height - 10, d.y));
    return d.y;
  });
  
  // 如果存在连线，同步更新连线的端点位置
  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);
});

为什么这样有效？ #

• 拖拽函数只负责约束被拖拽节点的临时固定位置（fx/fy），但其他节点在力的作用下仍可能移动到边界外。
• tick事件是力模拟每一步都会触发的回调，在这里强制修改所有节点的x和y值，确保它们始终在你设定的内边距范围内。
• 如果你希望拖拽结束后节点保持固定，就在dragended函数里不要把fx/fy设为null；如果想让节点继续受力调整位置，就保留这两行。

这样修改后，不管是拖拽操作还是力模拟的自动运动，所有节点都不会超出你设定的矩形范围啦。

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