antv/g6-editor的使用详解

在angular中使用@antv/g6-editor

你好！ 这是一篇讲解怎么使用g6-editor实现一个流程调度功能的文章。如果你想学习如何使用g6-editor, 可以仔细阅读这篇文章，了解一下g6-editor的基本用法知识。网上关于这方面的资料还算多，但是能比较详细讲解的是少之又少，顺手记录我在项目中的运用，希望对有这方面需求的同学有所帮助。

安装并在代码中引入

npm install @antv/g6-editor

import G6Editor from '@antv/g6-editor';

this.editor = new G6Editor();

添加组件

// 缩略图
const minimap = new G6Editor.Minimap({
  container: 'minimap'
});
// 工具栏
const toolbar = new G6Editor.Toolbar({
  container: 'toolbar'
});
// 菜单
const contextmenu = new G6Editor.Contextmenu({
  container: 'contextmenu'
});
// 画布
const itempannel = new G6Editor.Itempannel({
  container: 'itempannel'
});
// 详情信息
const detailpannel = new G6Editor.Detailpannel({
  container: 'detailpannel'
});
// 添加组件
this.editor.add(toolbar);
this.editor.add(minimap);
this.editor.add(contextmenu);
this.editor.add(itempannel);
this.editor.add(detailpannel);

container指向的是挂载组件的id。

获取当前页

// 获取最基础图类
const CPage = this.editor.getCurrentPage();

比如想获取图中的数据：node/group/edge，可用如下方式：

const nodes = CPage.getNodes() || [];
const edges = CPage.getEdges() || [];
const groups = CPage.getGroups() || [];
</