Sigma.js v2能否实现v1版本的标签大小比例化效果？

云原生阿岚

2026-8-5

在Sigma.js v2实现标签按比例显示

可以实现，下面是具体的思路和代码示例，不需要修改源码，利用现有API即可复刻初代Sigma的标签缩放效果：

核心思路

初代Sigma的标签按比例显示本质是标签大小随节点的画布缩放倍数动态调整，而v2默认标签是固定像素尺寸。我们可以通过自定义标签大小的计算逻辑，结合节点的实时缩放比例来实现。

具体实现步骤

自定义标签大小计算函数
Sigma允许通过labelSize配置项传入一个函数，动态计算每个节点的标签大小。我们可以通过相机获取节点的实时显示数据（包含缩放比例scale），用基础大小乘以该比例得到标签尺寸：

const sigma = new Sigma(graph, container, {
  // 其他基础配置...
  labelSize: (node) => {
    // 获取节点的实时显示数据
    const displayData = sigma.getRenderer().getCamera().getNodeDisplayData(node);
    // 基础标签大小设为12，乘以节点缩放比例，可根据需求调整
    const baseSize = 12;
    return baseSize * displayData.scale;
  },
});

监听相机更新，触发标签刷新
当相机缩放或平移时，节点的缩放比例会变化，需要触发标签大小重新计算。监听相机的updated事件，调用refresh()方法更新渲染：
```
sigma.getRenderer().getCamera().on('updated', () => {
  sigma.refresh();
});
```

添加大小范围限制（可选）
为了避免标签过小或过大影响可读性，可以给计算结果加范围约束：

labelSize: (node) => {
  const displayData = sigma.getRenderer().getCamera().getNodeDisplayData(node);
  const baseSize = 12;
  const scaledSize = baseSize * displayData.scale;
  // 限制标签大小在8-24像素之间
  return Math.max(8, Math.min(24, scaledSize));
},