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，但是这个 container 一般是和画布一起定义的，而plugin也是和画布一起定义的，因此不能用配置的方法来生成这个plugin，而只能在回调函数中动态添加这个plugin。

//定义Minimap的容器

ref={(dom) => {

this.miniMapDOM = dom as HTMLDivElement;

}}

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

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

g6的minimap中的配置_蚂蚁金服开源：数据驱动的高交互可视化图形语法G2
原标题:蚂蚁金服开源:数据驱动的高交互可视化图形语法G2 AntV是蚂蚁金服全新一代数据可视化解决方案,主要包含「数据驱动的高交互可视化图形语法」G2.专注解决流程与关系分析的图表库 G6.适于对性能 ...
g6的minimap中的配置_g6 基本
基本由靳肖健创建, 最后修改于十二月 28, 2020 g6是什么 G6 是一个图可视化引擎.它提供了图的绘制.布局.分析.交互.动画等图可视化的基础能力.旨在让关系变得透明,简单优秀的性能丰富的 ...
g6的minimap中的配置_GitHub - OXOYO/X-Flowchart-Vue at 26e6bbefb15e75e91d98e2a7566e6567edb34a1e
X-Flowchart-Vue A visual graph editor based on G6 and Vue. 预览示例 # git clone https://github.com/OXOY ...
基于live555中的liveMedia库的client开发流程此博文包含图片
基于live555中的liveMedia库的client开发流程转载▼ 如今流媒体无处不在,而主流流媒体服务器为Realworks.Windows Media Server.Apple Darwin ...
jenkins中jdk配置_如何在Jenkins中配置JDK
jenkins中jdk配置 In the previous chapter, we learnt how to configure the Jenkins and start the server a ...
嵌入式系统功能需求分析_嵌入式系统开发流程及前景分析
嵌入式系统开发就是对于除了电脑之外的所有电子设备上操作系统的开发,开发对象有手机,掌上电脑,机电系统等,以应用为中心,以计算机技术为基础,并且软硬件可裁剪,适用于应用系统对功能.可靠性.成本.体积.功 ...
ashx在web.config中如何配置_如何在 Istio 1.6 中配置 Prometheus-Operator 和抓取指标
在 Istio1.4 及以上版本中,可观测性指标的创建.交换和抓取的方式已经发生改变. 以下内容讲述了我如何配置 Prometheus Operator 资源以从 Istio1.6 中抓取指标和安装最 ...
ashx在web.config中如何配置_网络中，什么是半双工与全双工？它们如何配置
很多朋友在配置交换机或接触网络项目时,时常会看到关于半双工与全双工的模式,也有不少弱电人问到,那么今天我们一起来了解下它们. 什么是半双工与全双工 1.双工模式分为如下两种: a.半双工:接口任意时刻 ...
大数据之-Hadoop完全分布式_集群中SSH配置_远程免密码登录_为集群_群起做准备---大数据之hadoop工作笔记0036
之前我们做集群配置的时候,去连接,别的主机,都需要输入这个主机的密码,很麻烦,做分发的时候,还得多次输入不同主机的密码,是相当麻烦现在我们通过配置SSH来实现,主机之间的免密码登录可以看到hado ...
c# vscode 配置_使用VSCode开发C#项目
1.安装C#语言的运行环境.net core sdk 下载网址:https://dotnet.microsoft.com/download 2.在vscode中安装C#语言的插件 3.新建C#项目,打 ...

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

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

最新文章

热门文章