G6是阿里可视化团队开源的一款图可视化引擎，它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。项目地址在 这里。
但G6对React并不提供直接的支持，而且作为面向应用开发，这个引擎也太底层了一些，因此需要使用一个中间层来做一些封装。GGEditor项目就是这个中间层，它是本来是一个个人开源产品，但现在项目以及移动到阿里下，项目地址在 这里。
到目前为止（2020.6.1），GGEditor并不完善，和G6最新发布的3.5.0版本也存在问题，因此不能直接使用，需要一些额外的处理，具体可参考 awesome-patches。
GGEditor给出的例子还是比较简单的，下面就它未涉及的部分进行说明。
画布背景
在官方的 例子 中，画布背景只需要添加一个名为 grid 的插件就可以了。但这个做法在 antd pro 中并不能成功，这是因为 pro-layout 增加了一个背景层，从而把 grid 遮挡住了，因此需要修改相关的 z-index。
const canvas = graph.get('canvas');
modifyCSS(canvas.get('el'), {
'z-index': 1,
});
modifyCSS(grid.getContainer(), {
'z-index': 0,
});
小地图
这个也是官方的插件 Minimap，相关文档在 这里。但是同样也有问题，通常需要将小地图放在右下角的给定位置，因此需要给它传入一个 container，但是这个 container 一般是和画布一起定义的，而plugin也是和画布一起定义的，因此不能用配置的方法来生成这个plugin，而只能在回调函数中动态添加这个plugin。
<Card title="MiniMap" bordered={false}> //定义Minimap的容器
<div
ref={(dom) => {
this.miniMapDOM = dom as HTMLDivElement;
}}
/>
</Card>
<Flow
className={styles.graph}
ref={(component) => {
if (component) {
this.postLoad(component.graph); //画布生成结束后的回调函数
}
}}
...
/>
然后在这个回调函数中设置plugin
const miniMap = new G6.Minimap({
container: this.miniMapDOM,
viewportClassName: 'minimap-viewport',
});
graph.addPlugin(miniMap);
flowEditor.gif
