只要数据之间有关系，画成图就比表格直观得多：谁认识谁、哪个节点最核心、一条链路怎么走，用点和线一画，一眼就能看出来。自己拿 canvas 手写布局和连线，费劲还容易卡，节点一多就动不了。这次整理了 3 款开源免费可商用的前端图谱库，关系网络、知识图谱、拓扑图都能做，也都是纯前端文件，引到页面里就能跑。
三款库的差别
Cytoscape.js 是做关系网络图最成熟的一款，节点和边都支持样式定制，自带多种布局算法，能处理几千个节点，做知识图谱、组织关系、链路分析都稳。vis-network 主打开箱即用，自动布局、拖拽、缩放、点击展开这些交互都内置了，配置简单，做内部工具和后台的拓扑展示很省事。Springy.js 走的是极简路线，只有几十 KB，用最少代码把力导向的节点关系画出来，适合轻量展示。
使用方法
三款的思路都一样：准备好节点和边的数据，交给库，它来算位置和画线，需要交互就在事件回调里处理。都提供了压缩和未压缩文件，直接引到页面即可，其中 vis-network 还需要一起引入它自带的样式文件，否则节点和连线显示会不正常。包里的使用说明有每款的定位，各库文件夹保留了原生 README 和许可文件，照着示例改最快，先用样例数据跑通再换成自己的数据。
数据与体积提示
图谱好不好看，一半取决于数据怎么组织。节点太多、关系太乱的时候，先把不重要的点合并或过滤掉，再交给库去布局，出来的图才读得懂。另外这三款库本身都不含任何数据，节点和关系要自己准备，可以从接口拉，也可以直接写成 JSON 内嵌在页面里，数据量小的场景后者更省事，改起来也直观。真要做大图，建议分区域或分层次展示，别一次把所有节点都铺上去。
三款库体积都不大，加起来不到 2MB，纯前端零编译，放进现有项目就能用。许可分别是 MIT 和 Apache-2.0，商用、二次修改都不需要额外授权，保留对应 LICENSE 文件即可。数据请自备，本包内不含数据内容，拿自己业务里的关系数据套进这几款库，比通用图表更容易做出差异。
暂无评论内容