D3.js力导向图适配div边界：使用d3.json加载数据时约束逻辑失效

问题根因 #

• 代码存在冗余错误的SVG选择逻辑：你试图选择div#container，但你的容器只有class="container"没有id="container"，这段代码完全无效，虽然后续重新选择了SVG，但存在潜在冲突风险
• 核心的边界约束逻辑缺失：你现在的ticked回调里直接使用原生的d.x/d.y做位移，没有做任何边界裁剪计算，自然不会生效
• 拖拽逻辑未做边界限制：即使ticked加了限制，拖拽时如果不做坐标裁剪，还是可以把节点拖到SVG可视范围外

可行解决步骤 #

1. 首先删除冗余错误的SVG初始化代码，也就是下面这段完全没用的代码：

var svg = d3.select("div#container")
  .append("svg")
  .attr("preserveAspectRatio", "xMinYMin meet")
  .attr("viewBox", "0 0 300 300")
  .classed("svg-content", true);

你已经在HTML里写好了固定宽高的SVG标签，后续直接用d3.select("svg")获取的实例即可。

2. 修改ticked回调函数，在节点位移前先对坐标做边界裁剪：

function ticked() {
  link
      .attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

  node
      .attr("transform", function(d) {
        // 边界裁剪：5是节点圆半径，20是预留的文字显示宽度，可根据实际需求调整
        d.x = Math.max(5, Math.min(width - 20, d.x));
        d.y = Math.max(5, Math.min(height - 5, d.y));
        return "translate(" + d.x + "," + d.y + ")";
      })
}

3. 同步修改拖拽逻辑，避免拖拽时节点超出边界：

function dragged(d) {
  // 拖拽时也做同样的边界限制，参数和tick里的保持一致即可
  d.fx = Math.max(5, Math.min(width - 20, d3.event.x));
  d.fy = Math.max(5, Math.min(height - 5, d3.event.y));
}

如果需要更宽松/严格的边界，直接调整裁剪的阈值数值即可。

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