缩放时固定Sigma图水平节点位置的实现方案问询

Sigma默认相机约束会强制保持1:1宽高比，导致容器变窄长时无法充分利用宽度。要实现固定水平列位置且自适应容器宽度，可按以下步骤调整：

1. 禁用相机的等比缩放约束 #

修改Sigma初始化时的相机配置，取消宽高比强制限制，让画布能跟随容器比例自适应：

const sigma = new Sigma(graph, container, {
  camera: {
    // 取消等比缩放限制，允许画布按容器比例拉伸
    aspectRatio: 'auto',
    // 可选：手动绑定x轴边界，匹配节点的水平分布范围
    bounds: {
      left: graph.bounds().x1,
      right: graph.bounds().x2,
      top: null,
      bottom: null
    }
  },
  // 确保渲染器自适应容器尺寸
  renderer: {
    container: container,
    width: '100%',
    height: '100%'
  }
});

若使用Sigma v2，相机约束配置方式略有不同：

camera: {
  constraints: {
    aspectRatio: null, // 移除等比约束
    minZoom: 0.1,
    maxZoom: 10
  }
}

2. 锁定节点的水平位置 #

阻止力导向布局算法修改节点x坐标，以ForceAtlas2布局为例，可通过配置锁定x轴：

sigma.startForceAtlas2({
  settings: {
    // 锁定所有节点的x坐标，仅允许调整y轴位置
    lockX: true,
    // 若仅需锁定特定节点，可自定义判断逻辑
    // nodeFixed: (node) => node.attributes.isFixedColumn ? { x: true } : {}
  }
});

如果初始化时已给节点分配固定x值，上述配置可确保布局算法不会覆盖该值。

3. 适配容器大小变化 #

监听容器resize事件，动态更新相机视图范围，确保节点水平分布始终填满容器宽度：

window.addEventListener('resize', () => {
  const graphBounds = graph.bounds();
  // 更新相机边界，保持x轴匹配节点水平分布，y轴自动适配
  sigma.camera.setBounds({
    left: graphBounds.x1,
    right: graphBounds.x2,
    top: graphBounds.y1,
    bottom: graphBounds.y2
  });
  sigma.refresh();
});

通过以上配置，Sigma图表会自动适配容器宽高比，同时保留节点的固定水平列位置，无需手动调整所有x坐标。

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