Sigma.js样式定制终极指南：节点大小、颜色与标签一键美化

Sigma.js 是一款基于 WebGL 的开源 JavaScript 图库，专为可视化数千节点与边的图而设计。很多新手装完库后都会问：怎么改节点大小、换节点颜色、调标签字体？本文将用最少的代码，带你一次性掌握 Sigma.js 样式定制的全部套路——从静态属性到动态高亮，让任何一张网络图都能"一键美化"。🎨

节点大小与颜色属性：一张表搞定基础配置

Sigma.js 的样式控制分两层：数据层（每个节点/边自带的属性）和设置层（全局 defaults）。

节点常用属性（完整清单见 data.md）：

属性	作用	示例值
size	节点半径，越大越醒目	10
color	节点颜色，支持十六进制与 CSS 命名色	"#e22653" / "deeppink"
label	节点旁显示的文字	"Node 1"
type	节点形状，决定用哪个渲染程序	"circle" / "square"
forceLabel	标签强制显示，无视缩放级别	true

边（edge）同样有 size（粗细）、color、label、type（"line"、"arrow" 等）四个核心属性。

如果某个节点没写颜色，Sigma.js 会回退到全局默认值，默认值定义在 settings.ts：

• defaultNodeColor：默认 #999
• defaultEdgeColor：默认 #ccc
• defaultNodeType / defaultEdgeType：默认 circle / line

新手建议：节点颜色按"类别"分组（如社区、类型），size 映射到"度数"或"权重"，图的可读性会立刻上一个台阶。

标签美化四步走：字体、大小、粗细、颜色

标签是图的"说明书"。Sigma.js 提供了 4 个开箱即用的设置项（settings.ts）：

• labelFont：字体，默认 Arial
• labelSize：字号（px），默认 14
• labelWeight：字重，接受所有 CSS font-weight 值
• labelColor：颜色，可固定为 { color: "#000" }，也可写成 { attribute: "color" } 让每个标签跟随自己节点的颜色

边标签默认是关闭的，把 renderEdgeLabels 设为 true 后，同样可以用 edgeLabelFont、edgeLabelSize、edgeLabelWeight、edgeLabelColor 四件套来控制，效果如官方测试快照所示：

👉 进阶玩法：通过 defaultDrawNodeLabel、defaultDrawNodeHover 等设置项，直接接管 Canvas 2D 上下文，画出圆角背景卡片、阴影、副标题等专属标签样式。官方 demo 中就有一个完整实现，参考 canvas-utils.ts。

Reducers 动态高亮：让重点节点秒变焦点

静态样式解决"长什么样"，reducers 解决"交互时怎么变"。nodeReducer 和 edgeReducer 是渲染前最后一道"化妆台"——不改动原始图数据，就能实时改颜色、大小、透明度甚至隐藏元素。这是实现鼠标悬停邻居高亮、搜索匹配聚焦等效果的核心技巧：

sigma.setSetting("nodeReducer", (node, data) =>
  node === "specialNode"
    ? { ...data, size: data.size + 4, color: "#ff0000" }
    : data
);

配合 refresh({ skipIndexation: true }) 就能高性能重绘。下面是官方测试中 reducer 高亮"选中节点 + 邻居"的实际效果，蓝红对比一目了然：

完整交互示例（悬停变灰、搜索聚焦、邻居高亮三连招）见 use-reducers 示例源码。

缩放与尺寸行为：3个设置项让大图不重叠

Sigma.js 默认让节点尺寸随缩放按平方根缩放，且默认把整图自动缩放到视口中（设计动机详见 sizes.md）。如果这套默认行为不符合预期，有 3 个设置项可调（settings.ts）：

1. zoomToSizeRatioFunction：改成 (ratio) => ratio，尺寸就随缩放线性变化；
2. itemSizesReference：设为 "positions"，让尺寸与节点坐标共用同一坐标系；
3. autoRescale：设为 false，禁止自动缩放，位置按像素解释。

三个组合搭配，就能解决"小视口下节点互相压盖""尺寸难以预测"这类常见痛点。

自定义形状扩展：方节点、箭头边、图片节点

内置 type 只是起点。Sigma.js 允许注册全新的渲染程序（program），把节点画成方形、给边加箭头曲线、甚至贴上海报图片：

• 方形节点：node-square 包，与圆形节点混排毫无压力；
• 曲线边与箭头：edge-curve 包，支持平行边、多种箭头头；
• 图片节点：node-image 包，直接把 PNG/JPG 当节点贴图；
• 其他：node-border（描边节点）、node-piechart（饼图节点）、layer-webgl（WebGL 图层）。

下图就是同一张图里混合使用细线边、粗线边与箭头边（不同 edge program）的效果：

常用样式设置速查表

设置项	默认值	一句话说明
defaultNodeColor	#999	节点缺省颜色
defaultEdgeColor	#ccc	边缺省颜色
labelFont / labelSize	Arial / 14	标签字体与字号
labelColor	{ color: "#000" }	标签颜色（可跟随节点属性）
renderEdgeLabels	false	是否渲染边标签
stagePadding	30	画布四周留白（px）
zoomToSizeRatioFunction	Math.sqrt	缩放-尺寸映射函数
autoRescale	true	是否自动把图缩放进视口
nodeReducer / edgeReducer	null	渲染前动态改写外观的"化妆台"

全部设置项及其类型定义，可对照 settings.ts 中的 Settings 接口逐一查看。

写在最后

Sigma.js 的样式体系可以总结为一句口诀："静态看属性，全局看设置，动态看 Reducer，个性看 Program"。建议按这个顺序动手：先给数据补全 size/color/label，再微调 4 个标签设置，然后用 Reducer 加上交互高亮，最后按需注册自定义渲染程序。官方对这套机制的完整讲解在 customization.md，配合仓库内丰富的 Storybook 示例，足够你把图美化到"别人以为买了皮肤"的程度。✨