D3 Canvas力导向布局底部问题：拖拽节点边界限制实现疑问

我一眼就发现你代码里的问题啦——你在限制节点垂直（Y轴）移动范围的时候，错误地使用了width变量，而不是画布的height！这就导致节点的底部边界被设成了画布的宽度值，自然会出现底部相关的异常。

问题代码分析 #

你原来的代码中，Y轴范围限制用了width - 10：

// dragstarted里的错误代码
d3.event.subject.fy = Math.max(10, Math.min(width - 10, d3.event.subject.y)) ;

// dragged里对应的错误代码
d3.event.subject.fy = Math.max(10, Math.min(width - 10, d3.event.y));

显然，Y轴的边界应该基于画布的高度height来计算，而不是宽度。

修正后的完整代码 #

function dragstarted() {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  // 水平方向限制：基于width
  d3.event.subject.fx = Math.max(10, Math.min(width - 10, d3.event.subject.x));
  // 垂直方向修正：基于height
  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));
  // 垂直方向修正为height
  d3.event.subject.fy = Math.max(10, Math.min(height - 10, d3.event.y));
}

额外提示 #

1. 确保height变量已经正确定义，并且对应画布的实际高度值，避免出现未定义或者值不匹配的情况。
2. 如果修改后仍有异常，可以检查力导向布局的其他配置（比如是否有自定义的力影响节点位置），或者画布的尺寸设置是否正确。

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