可用 API

业务代码只从 @antv/g6-lite 包根导入。这一节列出应用可以直接调用的函数、类和类型。配置写法、交互示例和扩展教程分别在对应指南里。

import { Graph, register, extensionFactory, runLayout, resolveTheme } from '@antv/g6-lite';
import type {
  GraphData,
  GraphOptions,
  GraphEventMap,
  NodeModel,
  ElementState,
} from '@antv/g6-lite';

包只提供 ESM。CommonJS 工程在客户端边界使用动态导入：

const { Graph } = await import('@antv/g6-lite');

Graph 需要真实的 DOM、Canvas 和 WebGL，不能在没有画布的环境里创建实例。

调用顺序

const graph = new Graph({
  container: document.getElementById('container')!,
  data: { nodes: [{ id: 'a' }, { id: 'b' }], edges: [{ source: 'a', target: 'b' }] },
  layout: { type: 'force' },
});

graph.on('node:click', (event) => {
  graph.setItemState(event.nodeId, 'selected', true);
});

await graph.render();

graph.destroy();

new Graph() 只保存配置并准备画布。布局、绘制和后续数据修改都要等 await graph.render() 完成。在此之前调用 setData()、addNode()、setItemState()、layout() 会抛出 Graph must be rendered before calling data operations。

查询方法在首次渲染前返回空结果：getNodes() 为 []，getNodeData() 为 undefined。graph.on() 可以在 render() 之前注册。

可以直接使用的入口

常用类型都可以从包根导入：GraphData、GraphNode、GraphEdge、ComboData、NodeModel、EdgeModel、ComboModel、ElementState、GraphEventMap、FitViewOptions、ZoomOptions、SetDataOptions、LayoutConfig、LabelOptions、ThemeOption、BehaviorOption。

读取结果不能直接改

getNodeData()、getEdgeData()、getComboData() 返回的是只读视图。位置、业务字段和状态要走对应的写入方法：

const node = graph.getNodeData('a');
if (node) {
  graph.updateNodeData(node.id, { ...node.data, highlighted: true });
  graph.updateNodePosition(node.id, node.x + 20, node.y);
  graph.setItemState(node.id, 'selected', true);
}

直接给 node.x 赋值，或调用 node.states.add()，不会更新画面，类型检查也会拒绝。

引擎内部方法

下列成员出现在 Graph 类上，只供渲染和交互分发使用。业务代码使用表格右侧的公开入口。

EventEmitter 和 Handler 也从包根导出，它们是事件传输类型。订阅图事件时使用 graph.on()。

已有项目里的兼容入口

新代码使用右侧入口。这些符号仍可导入，后续版本会按 API 稳定性 移除。