g6的minimap中的配置_使用GGEditor开发流程编辑应用

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&#