ElGrapho 实践指南：用 WebGL 渲染百万级节点图

ElGrapho 实践指南：用 WebGL 渲染百万级节点图

【免费下载链接】ElGrapho项目地址: https://gitcode.com/gh_mirrors/el/ElGrapho

一个图谱页面的节点数过了 5 万，麻烦就开始了：Canvas 2D 在缩放、平移时掉帧，SVG 在这个量级根本打不开。ElGrapho 是一个 WebGL 图形引擎，把节点和边的绘制交给 GPU 并行执行，能在浏览器里稳定渲染百万级节点与边，同时保持交互流畅。本文按实际项目流程，讲清它的适用边界与取舍成本。

🧭 开场场景：5 万节点为什么掉帧

以力导向图为例，5 万节点通常伴随 10 万到 20 万条边。Canvas 2D 每一帧都要在 CPU 主线程里逐条遍历、逐条绘制这些边，数据量越过阈值后帧率线性下滑；SVG 更糟，几万个 DOM 元素本身就会让文档树与样式重算吃不消。瓶颈不在某个算法，而在渲染路径：CPU 承担逐帧矢量绘制时，数据增长的速度永远快过优化。出路只有一条，换掉“谁来画”。

📐 WebGL 凭什么撑住百万级节点

WebGL 与 Canvas/SVG 的差异是质变：场景以顶点缓冲与索引缓冲的形式上传到 GPU（节点是点精灵，边是线条图元），缩放和平移本质上只是改变一次视图矩阵，由着色器完成变换。因此一帧交互的代价基本与数据量无关，这是收益所在——交互性能在百万级规模下不塌方。而模型构建的代价是另一件事，它决定了后面怎么选布局。

ElGrapho 安装与初始化

安装就一条命令：npm install --save elgrapho。然后用container和model实例化。节点坐标 x、y 取值 -1 到 1（0 表示视口中心），group为整数，库会为不同分组自动分配颜色；想让悬停提示带文本，再给节点加label字段即可。

let graph = new ElGrapho({ container: document.getElementById('container'), model: { nodes: [ {x: 0, y: 0.6, group: 0}, {x: -0.4, y: 0, group: 1}, {x: 0.4, y: 0, group: 1} ], edges: [{from: 0, to: 1}, {from: 0, to: 2}] }, width: 500, height: 500 });

🎛️ 按数据形态选择布局算法

各布局的入参格式完全一致（nodes/edges 数组），同一份数据换一种布局就能得到另一种结果，方便拿同一数据集横向对比。按数据形态分：

ForceDirected 基于 d3-force，用 Barnes-Hut 近似减少边交叉，最擅长表达任意拓扑；Hairball 把高连接度的节点压向中心、低连接度的推到边缘，形成毛球效果；Cluster 则按 group 字段聚成团。

🚀 从 demo 到生产：服务端预计算与参数调优

布局计算与渲染完全解耦，模型可以在服务端预先生成并缓存，经 HTTP 下发后直接传入配置，仓库里的gallery/cached-force-directed-graph.html就是这个流程的现成例子。交互侧，百万级数据建议关掉过渡动画换取响应速度；darkMode开启后配glowBlend可获得辉光效果。事件走内置事件总线，支持node-click、node-mouseover、node-mouseout、idle。

let model = ElGrapho.layouts.Hairball(rawModel); // O(n)，百万级友好 let graph = new ElGrapho({ container: document.getElementById('container'), model: model, darkMode: true, animations: false, // 百万级数据关过渡动画，保交互响应 width: 800, height: 600 }); graph.on('node-click', function(evt) { console.log('node index:', evt.dataIndex); });

按节点数分档选择布局与交互参数

• 5 万以下：直接用 ForceDirected，steps保持默认 30 或适当上调，换取更整齐的布局；animations保持默认即可。
• 5 万到 100 万：服务端预计算 ForceDirected 并缓存模型，或降级到 Hairball / Cluster，同时关闭animations。
• 100 万以上：Hairball 或 Cluster 为主；可先开debug: true，右下角会显示节点数与边数，用来核对数据规模是否符合预期。

下一步可以拿自己数据复刻gallery/目录下的 big-hairball-graph、big-tree 等页面，在目标节点数上跑一轮帧率测试，再决定是否引入服务端预计算。

源码入口与相关路径

想改行为而不只是调参时，可以从这几处入手：engine/src/ElGrapho.js是主入口，负责配置解析与整体流程；engine/src/WebGL.js是渲染核心，缓冲与视口管理都在这里；engine/src/layouts/下是各布局的实现，调整算法从这里开始。

【免费下载链接】ElGrapho项目地址: https://gitcode.com/gh_mirrors/el/ElGrapho