交互式演练场

实时图算法演示，由 @graphrs/core 驱动。通过滑块调整参数，点击 Run 重新生成。滚轮缩放，拖拽平移。点击 Show Code 查看源代码，Fullscreen 进入全屏沉浸式体验。

力导向布局 — 实时收敛

观看无标度网络实时自组织。节点从随机位置出发，通过 Fruchterman–Reingold 算法逐步收敛为结构化布局 — 斥力推开节点，边上的引力拉近连接节点。能量条随系统收敛而下降：

社区发现

基于模块度优化的标签传播算法识别密集连接的社区。社区内部边高亮，跨社区连接淡化。高度数的社区枢纽节点带有光晕效果：

介数中心性

Brandes 算法计算每个节点被最短路径经过的频率。暖色调（红/橙）表示连接不同簇之间的结构性桥节点：

PageRank

对有向网页图运行幂迭代 PageRank 算法。节点大小和颜色编码权威度 — 金色节点是被链接最多的枢纽。边透明度反映连接重要性：

图生成器

比较不同随机图模型 — Barabási–Albert（无标度枢纽）、Erdős–Rényi（均匀随机）、Watts–Strogatz（小世界聚类）以及经典拓扑结构（环形、星形、完全图）。节点大小反映度数：

性能基准测试

点击 Run Benchmark 测量 BFS、Dijkstra、PageRank 和介数中心性在不同规模下的性能。图表展示 O(V+E) 与 O(V²·E) 的复杂度差异 — 1000 节点的介数中心性在纯 JS 中需要数秒，而 @graphrs WASM 可提供 10-500 倍加速：

G6 — 布局 + 社区检测管线

AntV G6 缺少内置社区检测功能，且布局在大规模图上性能下降。此演示展示 @graphrs 在 500+ 节点上作为单一管线同时计算力导向布局和社区检测 — 解决 G6 的分析性能瓶颈，附带计时结果：

React Flow — 即时分层布局

React Flow 没有内置布局功能 — 用户需要依赖外部库（dagre、elkjs），这些库速度慢且增加包体积。此演示展示 @graphrs 为 DAG 工作流即时计算 Sugiyama 分层布局，包含贝塞尔曲线边和正确的层级排序：