Sive
Sigma.js 图可视化
可视化

Sigma.js 图可视化

当用户需要用 WebGL 流畅渲染和探索大规模节点—边网络，或明确要求 Sigma.js 时，使用此 Skill。该库擅长：有向图、无向图、混合图、自环图、简单图、多重图、力导向网络图、知识图谱、社交网络图、关系网络图、网络拓扑图。不要用于复合图和图算法分析、可编辑流程设计器，或普通统计图表。

去使用
yvonneyx
yvonneyx
浏览296
使用8

Skill 文件

SKILL.md
name
sigmajs-graph
title
Sigma.js 图可视化
description
当用户需要用 WebGL 流畅渲染和探索大规模节点—边网络，或明确要求 Sigma.js 时，使用此 Skill。该库擅长：有向图、无向图、混合图、自环图、简单图、多重图、力导向网络图、知识图谱、社交网络图、关系网络图、网络拓扑图。不要用于复合图和图算法分析、可编辑流程设计器，或普通统计图表。

Sigma.js 图可视化

在单个 HTML 文件中使用 Sigma.js v3 (WebGL 渲染) + Graphology (图数据模型) 创建交互式网络图。

核心依赖 (CDN 内联 script)

通过 <​script​> 标签直接加载，无需 ES module 或构建工具：

html
<​script src="https://cdn.jsdmirror.com/npm/graphology@0.26.0/dist/graphology.umd.min.js"​><​/script​><​script src="https://cdn.jsdmirror.com/npm/graphology-library/dist/graphology-library.min.js"​><​/script​><​script src="https://cdn.jsdmirror.com/npm/sigma@3.0.0/dist/sigma.min.js"​><​/script​>

加载后全局可用：

  • graphology.Graph — 图构造函数
  • graphologyLibrary — 布局算法等工具集
  • Sigma — 渲染器构造函数

HTML 模板

生成 HTML 文件时必须遵循以下结构：

html
<!DOCTYPE html><​html lang="zh-CN"​><​head​>  <​meta charset="UTF-8" /​>  <​meta name="viewport" content="width=device-width, initial-scale=1.0" /​>  <​title​>Graph Visualization<​/title​>  <​script src="https://cdn.jsdmirror.com/npm/graphology@0.26.0/dist/graphology.umd.min.js"​><​/script​>  <​script src="https://cdn.jsdmirror.com/npm/graphology-library/dist/graphology-library.min.js"​><​/script​>  <​script src="https://cdn.jsdmirror.com/npm/sigma@3.0.0/dist/sigma.min.js"​><​/script​>  <​style​>    * { margin: 0; padding: 0; box-sizing: border-box; }    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f5f5f5; }    #sigma-container { width: 100vw; height: 100vh; background: #ffffff; }  <​/style​><​/head​><​body​>  <​div id="sigma-container"​><​/div​>  <​script​>    // 1. 创建图实例    const graph = new graphology.Graph();
    // 2. 添加节点 (必须包含 x, y, size, color, label)    graph.addNode("node1", { label: "Node 1", x: 0, y: 0, size: 10, color: "#4A90E2" });    graph.addNode("node2", { label: "Node 2", x: 1, y: 1, size: 8, color: "#E74C3C" });
    // 3. 添加边    graph.addEdge("node1", "node2", { size: 2, color: "#cccccc" });
    // 4. (可选) 使用 ForceAtlas2 自动布局    // const fa2Settings = graphologyLibrary.layoutForceAtlas2.inferSettings(graph);    // graphologyLibrary.layoutForceAtlas2.assign(graph, { iterations: 100, settings: fa2Settings });
    // 5. 渲染    const renderer = new Sigma(graph, document.getElementById("sigma-container"));  <​/script​><​/body​><​/html​>

关键 API 说明

节点属性

属性类型必须说明
xnumber是节点 X 坐标
ynumber是节点 Y 坐标
sizenumber是节点半径 (推荐 5-30)
colorstring是十六进制颜色
labelstring否节点标签文本

边属性

属性类型必须说明
sizenumber否边宽度 (推荐 1-5)
colorstring否十六进制颜色
labelstring否边标签文本

ForceAtlas2 自动布局

当节点没有预设坐标、或需要自动排列时，使用 ForceAtlas2：

javascript
// 随机初始化坐标graph.forEachNode((node) => {  graph.setNodeAttribute(node, "x", Math.random() * 100);  graph.setNodeAttribute(node, "y", Math.random() * 100);});
// 运行布局算法const settings = graphologyLibrary.layoutForceAtlas2.inferSettings(graph);graphologyLibrary.layoutForceAtlas2.assign(graph, {  iterations: 100,  settings: settings});

交互功能

Sigma.js 内置支持：

  • 缩放 (鼠标滚轮)
  • 平移 (拖拽空白区域)
  • 悬停高亮节点
  • 点击选中节点

添加自定义事件：

javascript
renderer.on("clickNode", ({ node }) => {  console.log("Clicked node:", node, graph.getNodeAttributes(node));});
renderer.on("enterNode", ({ node }) => {  document.body.style.cursor = "pointer";});
renderer.on("leaveNode", () => {  document.body.style.cursor = "default";});

常见场景示例

带搜索高亮的图

javascript
// 搜索节点并高亮function highlightNode(query) {  graph.forEachNode((node, attrs) => {    if (attrs.label && attrs.label.toLowerCase().includes(query.toLowerCase())) {      graph.setNodeAttribute(node, "highlighted", true);      graph.setNodeAttribute(node, "color", "#FF6B6B");    } else {      graph.setNodeAttribute(node, "highlighted", false);      graph.setNodeAttribute(node, "color", "#ccc");    }  });  renderer.refresh();}

带邻居高亮的悬停效果

javascript
renderer.on("enterNode", ({ node }) => {  const neighbors = graph.neighbors(node);  graph.forEachNode((n, attrs) => {    if (n === node || neighbors.includes(n)) {      graph.setNodeAttribute(n, "hidden", false);    } else {      graph.setNodeAttribute(n, "hidden", true);    }  });  renderer.refresh();});
renderer.on("leaveNode", () => {  graph.forEachNode((n) => {    graph.setNodeAttribute(n, "hidden", false);  });  renderer.refresh();});

注意事项

  1. 容器必须有明确的宽高：#sigma-container 需要有 CSS 尺寸，否则不会渲染。
  2. 节点必须有坐标：每个节点必须有 x 和 y，或使用布局算法自动分配。
  3. script 加载顺序：必须先加载 graphology，再加载 graphology-library，最后加载 sigma。
  4. 不要混用 v2 和 v3：v3 使用 new Sigma(graph, container) 而非 v2 的 new sigma(container, graph)。
  5. 颜色格式：必须使用十六进制 #RRGGBB 格式，不支持 CSS 颜色名称。
  6. 大图性能：超过 5000 节点时建议关闭 label 渲染以提升帧率：new Sigma(graph, container, { renderLabels: false })。
Ln 1, Col 1MarkdownSpaces: 2
No errors