📦 AntV Skills — AntV 技能s

G6 v5 图可视化代码生成技能 核心约束（必须遵守） 初始化规范 contAIner 参数必填，传入 DOM 元素 ID 字符串或 DOM 元素对象 使用 new Graph({...}) 构造函数，不得使用 new G6.Graph() (v4 写法) 所有配置在构造函数中一次性完成，不得事后多次调用配置方法覆盖 graph.render() 返回 Promise，异步渲染；若需等待完成请 awAIt graph.render() 数据结构规范 数据格式：{ nodes: [...], edges: [...], combos?: [...] } 每个节点必须有唯一 id（字符串）；业务数据放在 data 字段 边必须有 source 和 tar获取，值为节点 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 布局不支持 预防Overlap / nodeSize（G6 v4 参数，v5 静默忽略）；防重叠请改用 d3-force + collide 树形布局（mindmap, compact-box, dendrogram, indented）需要树形数据或 treeToGraphData() 转换 力导向布局异步运行，graph.render() 后会持续迭代 交互行为规范 behaviors 为字符串数组或配置对象数组 常用行为字符串简写：'drag-canvas', 'zoom-canvas', 'drag-element', '命令行工具ck-select' G6 v5 移除了 Mode（模式）概念，所有 behavior 直接在数组中配置 复杂配置使用对象形式：{ type: '命令行工具ck-select', multiple: true } 插件规范 插件s 为数组，与 behaviors 类似 简写：'minimap', 'grid-line', '工具tip' 复杂配置：{ type: '工具tip', 获取Content: (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: ['创建-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" 导入 { Graph, extend } from '@antv/g6'; const extendedGraph = extend(Graph, { nodes: { 'my-node': MyNodeFn }, });

// 错误：v4 的 group.添加Shape() API const MyNode = (node) => (模型) => { const group = node.group(); group.添加Shape('circle', { attrs: { r: 20 } }); };

// 正确：BaseNode 类 + register() 导入 { BaseNode, Circle, 扩展Category, 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(扩展Category.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.获取ElementById('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 导入 { Graph, GraphEvent } from '@antv/g6'; const graph = new Graph({ layout: { type: 'combo-combined' }, }); graph.on(GraphEvent.AFTER_LAYOUT, () => graph.fitView({ p添加ing: 20 })); graph.render();

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

基础结构模板 导入 { 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', tar获取: 'n2' }, ], },

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

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