常见问题
G6Lite 的选型、性能、兼容性、SSR、TypeScript 与 Combo 高频问题
G6Lite 和 G6 v5 怎么选?
G6Lite 聚焦 WebGL 渲染、高频状态更新和受控能力边界;G6 v5 提供更完整的插件、动画、元素与通用图可视化生态。请用真实数据验证目标场景,不按未经复现的绝对跑分或体积倍数选型。
如果核心问题是大规模关系图的浏览器渲染和分析交互,可以优先评估 G6Lite;如果重度依赖完整插件生态、复杂动画或图论能力,应优先评估 G6 v5。
力导向布局首屏慢怎么办?
首屏耗时通常由数据准备和布局计算主导。可按以下顺序排查:
- 已有坐标时直接传入
x/y,省略重复布局。 - 控制 force 系布局的迭代次数,并评估
worker: true。 - 大图总览优先使用 grid、circular 等确定性布局。
- 使用 Benchmark 运行器 区分布局与渲染耗时。
高亮或选中卡顿怎么办?
使用 setItemState() 或 batchSetState() 表达运行时状态,不要为了高亮而替换整份数据。批量位置和业务数据更新也应优先使用批量 API,避免同一帧触发大量独立调度。
浏览器和 WebGL 要求是什么?
G6Lite 需要 WebGL 1.0、Canvas 2D 和现代 ESM/ES2020 浏览器环境,不要求 WebGL 2.0。最低版本、移动端注意事项和硬件加速边界见 浏览器与运行环境。
能在 Node.js 或 SSR 阶段直接运行吗?
不能。Graph 依赖真实 DOM、Canvas 和 WebGL 上下文。在 Next.js、Nuxt 等框架中应只在客户端生命周期创建实例,并在组件卸载时调用 destroy()。
TypeScript 类型从哪里导入?
值和类型都从包根导入:
import { Graph } from '@antv/g6-lite';
import type { EdgeConfig, GraphData, GraphOptions, NodeConfig } from '@antv/g6-lite';src/ 深层路径不是公开 API。详细边界见 API 稳定性。
Combo 可以使用吗?
Combo 已支持分组容器、嵌套、折叠和运行时归组,但这些能力在 0.1.x 仍标记为 experimental。正式使用前需要覆盖真实嵌套层级、增量更新和折叠交互回归。
示例能在线运行吗?
官网示例链接到随静态站点一起部署的 Playground,并与 playground/demos/catalog.json、源码、截图和 Release profile 检查共用同一份案例清单。入口见 示例。