G6 v5 图可视化代码生成技能

核心约束（必须遵守）

初始化规范

• container 参数必填，传入 DOM 元素 ID 字符串或 DOM 元素对象
• 使用 new Graph({...}) 构造函数，不得使用 new G6.Graph() (v4 写法)
• 所有配置在构造函数中一次性完成，不得事后多次调用配置方法覆盖
• graph.render() 返回 Promise，异步渲染；若需等待完成请 await graph.render()

数据结构规范

• 数据格式：{ nodes: [...], edges: [...], combos?: [...] }
• 每个节点必须有唯一 id（字符串）；业务数据放在 data 字段
• 边必须有 source 和 target，值为节点 id
• 禁止使用 v4 的 graph.data() 方法传数据

节点/边样式规范

• 样式通过 node.style / edge.style 配置，支持静态值和回调函数
• 回调函数签名：(datum: NodeData | EdgeData) => value
• 标签文本通过 style.labelText 设置（不是 label 或 labelCfg）
• 节点大小通过 style.size 设置（单个数值或 [width, height] 数组）

布局规范

• layout 配置放在 Graph 选项中：{ type: 'force', ... }
• force 布局不支持 preventOverlap / nodeSize（G6 v4 参数，v5 静默忽略）；防重叠请改用 d3-force + collide
• 树形布局（mindmap, compact-box, dendrogram, indented）需要树形数据或 treeToGraphData() 转换
• 力导向布局异步运行，graph.render() 后会持续迭代

交互行为规范

• behaviors 为字符串数组或配置对象数组
• 常用行为字符串简写：'drag-canvas', 'zoom-canvas', 'drag-element', 'click-select'
• G6 v5 移除了 Mode（模式）概念，所有 behavior 直接在数组中配置
• 复杂配置使用对象形式：{ type: 'click-select', multiple: true }

插件规范

• plugins 为数组，与 behaviors 类似
• 简写：'minimap', 'grid-line', 'tooltip'
• 复杂配置：{ type: 'tooltip', getContent: (e, items) => '...' }

禁止的错误模式

❌ 使用 v4 API

// 错误：v4 chainable API
const graph = new G6.Graph({ ... });
graph.data(data);
graph.render();
graph.node((node) => ({ ... }));  // v4 回调

// 正确：v5 构造函数
const graph = new Graph({
  container: 'container',
  data: { nodes: [...], edges: [...] },
  node: { style: { ... } },
});
graph.render();

❌ 错误的节点 data 结构

// 错误：直接在顶层放业务属性
{ id: 'node1', label: 'Node 1', value: 100 }

// 正确：业务属性放在 data 字段
{ id: 'node1', data: { label: 'Node 1', value: 100 } }

❌ 错误的标签配置

// 错误：v4 labelCfg
node: {
  labelCfg: { style: { fill: '#333' } }
}

// 正确：v5 style.labelText
node: {
  style: {
    labelText: (d) => d.data.label,
    labelFill: '#333',
    labelFontSize: 14,
  }
}

❌ behaviors 使用 Mode 概念

// 错误：v4 modes
modes: {
  default: ['drag-canvas', 'zoom-canvas'],
  edit: ['create-edge'],
}

// 正确：v5 直接 behaviors 数组
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],

❌ 自定义节点 render() 中读取 attributes.data → 白屏

// 错误：attributes 是计算后的样式对象，不含节点 data，访问 data.color 抛 TypeError
render(attributes, container) {
  const { data } = attributes;       // undefined
  const fill = data.color;           // TypeError → 白屏
}

// 正确：通过 node.style 回调把 data 字段映射为自定义样式属性
// ① Graph 配置
node: {
  type: 'my-node',
  style: { color: (d) => d.data.color },
},
// ② render() 中直接从 attributes 读取
render(attributes, container) {
  const { color = '#1783FF' } = attributes;  // ✅
}

❌ 使用 extend 注册自定义节点

// 错误：extend 已从 G6 v5 正式版移除，导入后调用会报 "extend is not a function"
import { Graph, extend } from '@antv/g6';
const extendedGraph = extend(Graph, {
  nodes: { 'my-node': MyNodeFn },
});

// 错误：v4 的 group.addShape() API
const MyNode = (node) => (model) => {
  const group = node.group();
  group.addShape('circle', { attrs: { r: 20 } });
};

// 正确：BaseNode 类 + register()
import { BaseNode, Circle, ExtensionCategory, Graph, register } from '@antv/g6';
class MyNode extends BaseNode {
  render(attributes, container) {
    super.render(attributes, container);
    this.upsert('key', Circle, { cx: 0, cy: 0, r: 20, fill: '#1783FF' }, container);
  }
}
register(ExtensionCategory.NODE, 'my-node', MyNode);
const graph = new Graph({ node: { type: 'my-node' } });

❌ 缺少 container

// 错误：遗漏 container
const graph = new Graph({ width: 800, height: 600 });

// 正确：container 必填，值为字符串 ID 或 DOM 元素
const graph = new Graph({ container: 'container', width: 800, height: 600 });
// 或传入 DOM 元素
const graph = new Graph({ container: document.getElementById('container'), width: 800, height: 600 });

常见变体错误：container: container（把字符串 ID 当变量名使用，变量未定义 → ReferenceError → 白屏）

❌ autoFit: 'view' 配合异步力导向布局导致白屏

// 错误：combo-combined / force / d3-force 等布局是异步迭代的
// autoFit 在布局迭代开始前执行，节点全堆在原点，包围盒为零 → 缩放异常 → 白屏
const graph = new Graph({
  autoFit: 'view',          // ❌ 异步布局下不能在此设置
  layout: { type: 'combo-combined' },
});
graph.render();

// 正确：不设置 autoFit，在 AFTER_LAYOUT 事件后调用 fitView
import { Graph, GraphEvent } from '@antv/g6';
const graph = new Graph({
  layout: { type: 'combo-combined' },
});
graph.on(GraphEvent.AFTER_LAYOUT, () => graph.fitView({ padding: 20 }));
graph.render();

同步布局（dagre、grid、circular 等）不受此影响，可以直接用 autoFit: 'view'。

基础结构模板

import { Graph } from '@antv/g6';

const graph = new Graph({
  // 1. 容器
  container: 'container',       // DOM id 或 HTMLElement
  width: 800,
  height: 600,
  autoFit: 'view',              // 可选：'center' | 'view' | false

  // 2. 数据
  data: {
    nodes: [
       { id: 'n1', data: { label: '节点1' } },
       { id: 'n2', data: { label: '节点2' } },
    ],
    edges: [
       { source: 'n1', target: 'n2' },
    ],
  },

  // 3. 节点样式
  node: {
    type: 'circle',             // 节点类型
    style: {
      size: 40,
      fill: '#1783FF',
      stroke: '#fff',
      lineWidth: 2,
      labelText: (d) => d.data.label,
      labelPlacement: 'bottom',
    },
  },

  // 4. 边样式
  edge: {
    type: 'line',
    style: {
      stroke: '#aaa',
      lineWidth: 1,
      endArrow: true,
    },
  },

  // 5. 布局
  layout: {
    type: 'force',
    preventOverlap: true,
    nodeSize: 40,
  },

  // 6. 交互
  behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],

  // 7. 插件（可选）
  plugins: ['grid-line'],

  // 8. 主题（可选）
  theme: 'light',               // 'light' | 'dark'
});

graph.render();

图类型选择指南

内置节点类型

内置边类型

内置布局算法

内置交互行为

内置插件

元素状态（States）

G6 v5 内置 5 种状态：selected、active、highlight、inactive、disabled

// 在 Graph 配置中为状态设置样式
node: {
  style: {
    fill: '#1783FF',
  },
  state: {
    selected: {
      fill: '#ff6b6b',
      stroke: '#ff4d4d',
      lineWidth: 3,
    },
    hover: {
      fill: '#40a9ff',
    },
  },
},

// 动态设置状态
graph.setElementState('node1', 'selected');
graph.setElementState('node1', ['selected', 'highlight']);
graph.setElementState('node1', []);  // 清除所有状态

主题系统

// 内置主题
const graph = new Graph({
  theme: 'light',   // 默认
  // theme: 'dark',
});

// 动态切换主题
graph.setTheme('dark');
graph.render();

数据操作 API

// 添加元素
graph.addNodeData([{ id: 'n3', data: { label: '新节点' } }]);
graph.addEdgeData([{ source: 'n1', target: 'n3' }]);

// 更新元素
graph.updateNodeData([{ id: 'n1', style: { fill: 'red' } }]);

// 删除元素
graph.removeNodeData(['n3']);

// 更新数据后需要重新渲染
graph.draw();

常见使用模式

数据驱动样式（推荐）

node: {
  style: {
    size: (d) => d.data.size || 30,
    fill: (d) => {
      const colorMap = { type1: '#1783FF', type2: '#FF6B6B', type3: '#52C41A' };
      return colorMap[d.data.type] || '#ccc';
    },
    labelText: (d) => d.data.name,
  },
},

调色板（Palette）映射

node: {
  palette: {
    type: 'group',       // 按分类映射颜色
    field: 'category',   // 数据中的分类字段
    color: 'tableau10',  // 内置色板名
  },
},

连续数值映射节点大小

transforms: [
  {
    type: 'map-node-size',
    field: 'value',
    range: [16, 60],
  },
],

平行边处理

transforms: [
  {
    type: 'process-parallel-edges',
    offset: 15,
  },
],
edge: {
  type: 'quadratic',
},

数据操作 API 速查

// 增
graph.addNodeData([{ id: 'n3', data: { label: '新节点' } }]);
graph.addEdgeData([{ source: 'n1', target: 'n3' }]);
graph.draw();

// 删
graph.removeNodeData(['n3']);   // 关联边自动删除
graph.draw();

// 改
graph.updateNodeData([{ id: 'n1', data: { label: '更新' } }]);
graph.draw();

// 查
const node = graph.getNodeData('n1');
const selected = graph.getElementDataByState('node', 'selected');
const zoom = graph.getZoom();

// 视口
await graph.fitView({ padding: 20 });
await graph.focusElement('n1', { duration: 500 });
await graph.zoomTo(1.5);

// 状态
graph.setElementState('n1', 'selected');
graph.setElementState('n1', []);          // 清除

// 销毁
graph.destroy();

事件监听速查

// 元素事件（node/edge/combo + 事件类型）
graph.on('node:click', (e) => console.log(e.target.id));
graph.on('edge:pointerover', (e) => graph.setElementState(e.target.id, 'active'));
graph.on('canvas:click', () => { /* 点击空白 */ });

// 生命周期事件
import { GraphEvent } from '@antv/g6';
graph.on(GraphEvent.AFTER_RENDER, () => console.log('渲染完成'));
graph.on(GraphEvent.AFTER_LAYOUT, () => console.log('布局完成'));

Reference 文档索引

核心

• g6-core-graph-init：Graph 初始化完整配置
• g6-core-data-structure：数据结构规范
• g6-core-graph-api：Graph 实例 API（增删改查、视口、状态）
• g6-core-events：事件系统（元素事件、画布事件、生命周期）
• g6-core-custom-element：自定义节点/边（register + BaseNode/BaseEdge）
• g6-core-transforms-animation：数据变换（map-node-size）与动画配置

节点类型

• g6-node-circle：圆形（通用）
• g6-node-rect：矩形（流程图）
• g6-node-image：图片节点
• g6-node-diamond-ellipse-hexagon：菱形/椭圆/六边形
• g6-node-star-triangle-donut：五角星/三角形/环形进度
• g6-node-html：HTML 富文本节点
• g6-node-react：React/Vue 自定义节点（@antv/g6-extension-react）

Combo

• g6-combo-overview：Combo 分组（circle/rect，折叠展开）

边类型

• g6-edge-line：直线边
• g6-edge-cubic：三次贝塞尔曲线边
• g6-edge-cubic-directional：有向三次曲线（cubic-horizontal 水平 / cubic-vertical 垂直）
• g6-edge-polyline：折线边
• g6-edge-quadratic-loop：二次曲线与自环边

布局

• g6-layout-force：力导向（force/d3-force）
• g6-layout-dagre：层次/流程图（dagre）
• g6-layout-circular：环形
• g6-layout-grid：网格
• g6-layout-mindmap：思维导图
• g6-layout-advanced：同心圆/辐射/mds/fruchterman
• g6-layout-combo-fishbone：复合布局（combo-combined）+ 鱼骨布局（fishbone）

数据变换

• g6-core-transforms-animation：map-node-size 与动画配置
• g6-transform-parallel-edges-radial：平行边处理（process-parallel-edges）+ 径向标签（place-radial-labels）

交互行为

• g6-behavior-click-select：点击选中
• g6-behavior-drag-element：拖拽节点
• g6-behavior-canvas-nav：画布拖拽+缩放
• g6-behavior-hover-activate：悬停激活
• g6-behavior-lasso-collapse：套索选择 + 折叠展开
• g6-behavior-create-edge-focus：创建边 + 聚焦元素
• g6-behavior-advanced：fix-element-size / auto-adapt-label / drag-element-force

插件

• g6-plugin-tooltip：悬停提示框
• g6-plugin-minimap：缩略图
• g6-plugin-contextmenu-toolbar：右键菜单 + 工具栏
• g6-plugin-history-legend：撤销重做 + 图例
• g6-plugin-fisheye-hull-watermark：鱼眼放大 + 轮廓包围 + 水印
• g6-plugin-timebar-gridline：时间轴 + 网格线
• g6-plugin-background-snapline：画布背景（background）+ 对齐线（snapline）
• g6-plugin-edge-bundling-bubble：边绑定（edge-bundling）+ 气泡集（bubble-sets）
• g6-plugin-fullscreen-title：全屏（fullscreen）+ 图标题（title）

状态与主题

• g6-state-overview：元素状态系统
• g6-theme-overview：主题系统

场景模板

• g6-pattern-network-graph：网络关系图
• g6-pattern-tree-graph：树形图/组织架构
• g6-pattern-flow-chart：流程图