vis.js network初始化加载时节点堆叠重叠如何实现自动分散布局

节点加载时堆叠在同一位置，核心是布局物理引擎未正确计算位置、或容器尺寸识别异常，按以下步骤调整即可实现自动留距的布局效果：

• 校验初始化时机
  不要在承载网络图的DOM容器处于隐藏状态（比如未激活的标签页、未弹出的弹窗内，容器display: none时宽高为0）时初始化Network实例，必须等容器渲染完成、能获取到实际宽高后再执行初始化代码，否则物理引擎会默认所有节点坐标都在容器原点，直接堆叠。
• 调整物理引擎配置
  给节点配置足够的排斥力，同时开启初始化自动稳定布局，可直接参考以下基础配置，参数可根据你的节点总数微调：

const networkOptions = {
  nodes: {
    // 先给节点设置固定尺寸，方便引擎计算避让间距
    size: 20,
    font: { size: 14 }
  },
  physics: {
    enabled: true,
    barnesHut: {
      gravitationalConstant: -8000, // *控制节点间距的核心参数*，节点间排斥力，负数值越大排斥越强，节点间距越大
      centralGravity: 0.3, // 中心牵引力，避免节点被斥力推得过于分散
      springLength: 150, // 节点间连线的默认自然长度
      springConstant: 0.04,
      damping: 0.09 // 阻尼系数，值越大节点越快停止晃动
    },
    stabilization: {
      enabled: true,
      iterations: 1000, // 初始化时自动计算布局的迭代次数，节点超过100个可适当调到2000
      updateInterval: 25
    }
  }
}

• 初始化后主动触发布局校准
  实例化Network后，加以下监听逻辑，等布局计算完成后自动关闭物理模拟避免节点持续拖动，同时强制适配容器尺寸：

const network = new vis.Network(container, data, networkOptions);
// 布局计算完成后关闭物理引擎，固定节点位置
network.once('stabilizationIterationsDone', () => {
  network.setOptions({ physics: false });
});
// 强制适配视图，让所有节点完整显示在容器内
network.fit();

效果参考 #

当前异常效果：

预期实现效果：
#

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