01
接入数据
用节点、边与分组，描述真实业务关系。
nodes [ a, b, c ]
edges [ a → b, a → c ]
combos [ group ]
从关系数据，到可交互的图
基于统一的数据模型与配置接口，覆盖数据接入、布局计算、图形渲染和交互控制。 了解图的生命周期
02
组织布局
按图结构选择算法，让关系各就其位。
03
高效渲染
WebGL 绘制图形，Canvas 承载文本信息。
Canvas · 标签信息
WebGL · 节点与边
Canvas · Combo 分组
04
流畅交互
缩放、拖拽与高亮，沿增量链路及时反馈。
轻量加载，流畅交互
按需加载降低初始开销，WebGL 批量绘制支撑复杂关系渲染，按变化类型处理交互更新。
轻量加载
核心入口与布局算法分离，按需加载所选布局，降低初始化阶段的加载开销。
初始入口实测83.8kBminify + Brotli · 未加载布局
核心入口布局按需加载
v0.1.0-beta.27 · 2026-10-13批量渲染
同类节点与边进入 WebGL 绘制批次，利用 GPU 处理图形数据，支撑复杂关系网络的可视化。
节点数据
边数据
WebGL绘制批次
按需更新
交互时复用已有布局，分别处理视口、节点位置与状态变化，减少不必要的重复计算。
状态变化，更新节点与邻接关系的颜色
交互机制示意 · 更新方式随变化类型而定实际加载体积与交互表现取决于构建方式、数据和设备。查看性能验证方法
精选示例
通过关系网络、层级图、脑图与鱼骨图，查看不同类型的图可视化效果。
import { Graph } from '@antv/g6-lite';
const graph = new Graph({
container: 'graph',
data: {
nodes: [{ id: 'a' }, { id: 'b' }, { id: 'c' }],
edges: [
{ source: 'a', target: 'b' },
{ source: 'a', target: 'c' },
],
},
layout: { type: 'circular', radius: 140 },
behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node', 'hover-highlight'],
});
await graph.render();使用方
业务应用Web · React · Vue
公开入口
Graph API数据 · 布局 · 状态 · 视口 · 扩展
内部职责
数据模型
节点、边、分组与状态
布局计算
按需选择算法，计算坐标
交互控制
画布事件、行为与命中反馈
渲染调度
按变更类型安排更新
协同绘制
上层Canvas 2D
标签与图标
主画布WebGL
节点与边 · 按需拾取
底层Canvas 2D
Combo 分组边界
开始使用 G6Lite
阅读接入指南，构建可交互的关系图；查看源码，了解实现细节与扩展方式。