如何让SigmaJS的ForceAtlas布局适配3.5:1宽高比的容器？

核心问题根源 #

ForceAtlas2算法默认基于方形坐标系计算节点间的斥力与引力，即使初始布局是椭圆形状，迭代过程中力的平衡会逐渐将节点拉回方形空间，导致布局收缩。

可行解决方向 #

1. 迭代后强制坐标缩放（最简单快速的方案） #

在ForceAtlas2迭代完成后，手动将节点坐标映射到目标椭圆区域，直接拉伸x轴以填满容器宽度：

// 假设容器宽度是高度的3.5倍，targetWidth = 3.5 * targetHeight
const targetWidth = 700; // 示例值，根据实际容器调整
const targetHeight = targetWidth / 3.5;

// 获取当前布局的坐标极值
const minX = Math.min(...graph.nodes.map(n => n.x));
const maxX = Math.max(...graph.nodes.map(n => n.x));
const minY = Math.min(...graph.nodes.map(n => n.y));
const maxY = Math.max(...graph.nodes.map(n => n.y));

// 映射到目标区域
graph.nodes.forEach(node => {
  // x轴拉伸到目标宽度
  node.x = ((node.x - minX) / (maxX - minX)) * targetWidth;
  // y轴适配目标高度
  node.y = ((node.y - minY) / (maxY - minY)) * targetHeight;
});

如果单次缩放后布局不够自然，可以在ForceAtlas2的迭代过程中每隔N次迭代就执行一次缩放，平衡布局自然度与空间利用率。

2. 修改ForceAtlas2的力计算逻辑（适配椭圆空间的根本方案） #

ForceAtlas2的力计算依赖欧几里得距离，我们需要修改距离计算方式，让x轴的“有效距离”按比例缩小，从而让算法在x方向上产生更强的斥力，维持椭圆布局：
在ForceAtlas2算法的距离计算部分，将x坐标的差值除以3.5（即宽度/高度的比例）：

// 原算法中计算节点间距离的代码片段
const dx = nodeA.x - nodeB.x;
const dy = nodeA.y - nodeB.y;
const distance = Math.sqrt(dx * dx + dy * dy);

// 修改为椭圆空间的距离计算
const scaledDx = dx / 3.5;
const distance = Math.sqrt(scaledDx * scaledDx + dy * dy);

这样算法会认为x方向的节点间距更小，从而施加更大的斥力，推动节点在x方向上分散，最终形成适配宽高比的布局。

3. 调整ForceAtlas2的力参数（微调方案） #

在inferSettings生成的基础上，手动增大x方向的力相关参数：

settings = forceAtlas2.inferSettings(graph);
// 增大x方向的斥力系数，让节点在x轴更分散
settings.repulsionStrength *= 3.5;
// 或者单独调整x轴的引力/斥力缩放
forceAtlas2.assign(graph, { settings: settings, iterations: 50 });

这种方案效果可能有限，因为算法的力平衡逻辑还是基于方形空间，但可以作为辅助手段配合其他方案使用。

内容的提问来源于stack exchange，提问作者T. Altena