AntV G6入门教程

以下教程聚焦于 AntV G6 的 数据操作 API，详细介绍各个方法的用途、参数以及完整的使用示例，帮助你在图实例上精细地读取、修改和管理节点/边/组合等数据。文中示例代码均基于 G6 v5.0.47 官方文档 ([g6.antv.antgroup.com][1])。

一、获取完整图数据

1.1 graph.getData()

• 功能：一次性获取图中的所有节点（nodes）、边（edges）和组合（combos）数据。
• 返回值：Required<GraphData>，包含 { nodes: NodeData[]; edges: EdgeData[]; combos: ComboData[] }。

// 在已有 Graph 实例 graph 上调用
const graphData = graph.getData();
console.log('所有节点：', graphData.nodes);
console.log('所有边：', graphData.edges);
console.log('所有组合：', graphData.combos);

([g6.antv.antgroup.com][1])

二、读取节点 / 边 / 组合 数据

G6 支持按 ID 或批量读取，也可获取指定状态下的数据。

2.1 graph.getNodeData()

// 读取所有节点
const allNodes = graph.getNodeData();

// 读取单个节点
const node1 = graph.getNodeData('node1');
console.log('node1 坐标：', node1.style.x, node1.style.y);

// 批量读取
const [n1, n2] = graph.getNodeData(['node1', 'node2']);

([g6.antv.antgroup.com][1])

2.2 graph.getEdgeData()

// 读取所有边
const allEdges = graph.getEdgeData();

// 读取单条边
const edge1 = graph.getEdgeData('edge1');
console.log('edge1:', edge1.source, '→', edge1.target);

// 批量读取
const [e1, e2] = graph.getEdgeData(['edge1', 'edge2']);

([g6.antv.antgroup.com][1])

2.3 graph.getComboData()

// 读取所有组合
const allCombos