G6使用心得（hx的拓扑图历险记）如何开发前端拓扑图、关系图

最新推荐文章于 2024-06-20 22:10:34 发布

20世纪中二少年luohongxin

最新推荐文章于 2024-06-20 22:10:34 发布

阅读量8.5k

点赞数 11

分类专栏：插件文章标签： javascript echarts 关系模型

本文链接：https://blog.csdn.net/weixin_43589827/article/details/121658337

版权

插件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简介

引用G6官方简介中的第一句话，G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。

背景

在一般的开发过程中，大多数人都会使用 echarts 或 highcharts 等图表插件去开发 “漂亮的” 数据展示。那我前段时间也接触了一个关于用拓扑图漂亮的去展示数据的需求任务，其实 echarts 中的 graph 关系图，的确也能够实现需求所要的基本效果。

所以在第一个拓扑图开发时，由于时间紧迫（开发时间懂得都懂），就匆匆用 echarts 去实现了。效果图如下：
在这里插入图片描述

用 echarts 做出的拓扑图（关系图），能够放大缩小，图标也支持使用 SVG，滑动能展示详情（这里详情不是异步请求的，是节点原来自带的，如果要异步请求，那可能只能更新整个视图数据，需重新加载视图了），同时图标也会有个滑动放大效果，而且整个图布也能支持拖拽。

开发完整个拓扑图后，作为开发的我，其实觉得都还好。但不足的是，需求想要能对单个图标进行拖拽，做到挪位置的效果，我看了 echarts 所有配置，查了一遍，发现好像真没有提供这个效果的功能。毕竟这 echarts 拓扑图里的每一个图标位置，都是在初始化的时候，我在 nodes 数据里给它们的 x ,y 数据一个一个去定位的，也就是它们的位置是要我亲自去计算的（感觉回到了大学初学编码，用C++画猫的情景）。

echarts 开发拓扑图（关系图），总结一句活就是，配置简单，但位置计算麻烦，而且功能太少了。（echarts 不是针对于关系图做的图表插件，要求的确也不能太高）

所以在后面的新模块中开发拓扑图时，只能另寻新欢了。
上网搜了很多前端实现拓扑图的插件，大多数都很难让我满意，不满意主要是三点：

1、插件太老，样式不好看，引入方式只支持 script 标签引入那种，还有就是太老而且没更新。
例如 jtopo：
看这效果图，感觉回到了小学电脑室看 xp 系统电脑的年代。。。
在这里插入图片描述

最新版本是 0.4.8，虽然没标注时间，但相差四个版本的 0.4.4 已是 2014 年了。现在已是 2021年底，差了快七年，更新迭代才四个小版本。。。（好奇作者是放弃了，还是。。。其实网上还是有不少人推这个插件的，配置简单，功能也丰富，的确也挺适合一些老项目的）
在这里插入图片描述

2、配置文档少或都是英文
我英文水平虽不是很高，但阅读文档还是洒洒水的（广东话，无压力），例如 visjs插件。但我是中国人（其实还是文档有点少，不够详细，也不知道是不是更详细的文档得翻墙，而且英文阅读起来没有直接看中文快，没太多时间慢慢研究英文的文档了），我要支持国产插件！（中国人的骨气）

3、个人开发的插件，没有专业团队维护。
这个比较致命，不说功能多不多，单单是迭代维护少就够呛，可能 bug 还不少，几乎没人愿意把公司重要的业务去用一个不靠谱的插件开发吧！

综上三点，我就筛选掉大多数的拓扑图插件，最后才找到 G6。一个国产开发，有具体的中文文档（网上不少人说G6的文档不够详细，其实不是不够详细，而是有点“乱”，它的功能很多，但是文档写的有点乱，跳来跳去看，而且不同G6版本所用的配置还不一样，文档没及时更新，所以百度或示例看到的，你用了不一定起效，但认真看和结合自己的开发经验，还是能搞明白的），蚂蚁金服专业团队开发维护，功能丰富，样式还好看的插件。

基本概念

我们看 G6 的图表示例目录可以得知，G6 的图表其实就两种，一个是一般图，一个是树图。这两个在开发拓扑图的时候，我都用过。从数据上看，最大的区别是，一般图是要有 nodes 节点、edges 关系这两个数据，而树图仅仅是一个树结构的数据对象即可，关系会更简单一点。

如何查看文档

第一次使用G6开发的话，建议先去看 G6教程中的核心概念，它里面有张导图，多花几分钟看这张图就大概明白G6都有哪些配置和功能了。
在这里插入图片描述

前面就有说过，G6的文档，第一次看的时候会觉得乱，加上部分地方的描述不够详细，而且总是出现这边讲一点，另一边讲一点的情况，所以第一次看的时候，是有点难受。
但如果你清楚了上面我所说的基本概念，G6总体划分为一般图和树图的区别后，你再以这个思路去看文档的API文档，就会清晰很多了，至少不会在做一般图的时候去看树图的配置了。API文档链接
在这里插入图片描述

当你确定你要做的是哪种图后，你就只看对应图的配置和通用配置即可，别的就不要再看了，两种图的配置差别还是很大的，都看容易被混淆。

如何使用

我这就不用废话了，具体还是去看文档，以下我只会简略的阐述下过程。
1、首先就是安装。

npm install --save @antv/g6

2、然后就是引用

import G6 from '@antv/g6';

3、确保页面有个元素作为图表容器

<div id="mountNode"></div>

4、初始化 Graph ，生成一个图表实例。
一般图（Graph）：

const graph = new G6.Graph({
  container: 'mountNode', // 容器
  width: 500,
  height: 500,
  modes: {
    default: ['drag-canvas'], // 这有好几个配置，支持拖拽画布、节点，还有放大缩小画图都可以在这设置
  },
  layout: {
    type: 'radial', // 布局类型，echarts需要你设置xy定位，而这个类型可以帮你实现各种布局类型
    unitRadius: 50,
    center: [500, 300],
  },
});

树图（TreeGraph）：

const treeGraph = new G6.TreeGraph({
  container: 'mountNode',
  width: 800,
  height: 600,
  modes: {
    default: [
      {
        type: 'collapse-expand',
        onChange(item, collapsed) {
          const icon = item.get('group').findByClassName('collapse-icon');
          if (collapsed) {
            icon.attr('symbol', EXPAND_ICON);
          } else {
            icon.attr('symbol', COLLAPSE_ICON);
          }
        },
      },
      'drag-canvas',
      'zoom-canvas',
    ],
  },
  layout: {
    type: 'dendrogram',
    direction: 'LR', // H / V / LR / RL / TB / BT
    nodeSep: 50,
    rankSep: 100,
    radial: true,
  },
});

其实上面四步就已经完成了。只不过需要根据需求定制一些东西，这就还是得去看API文档的下图中的通用配置了。（只能说，功能很强大，就看你文档看得细不细了）
在这里插入图片描述

看图中这些配置文档，总比我写太多杂七杂八的东西好，不然你一下参考我这，一下参考文档，没必要。

总结

使用 G6 专门开发拓扑图比 echarts 好很多，起码功能上丰富许多，基本满足需求。但开发过程中也会有些问题，比如节点过多的情况，它内部计算定位会比较消耗性能，花的时间可能要好几秒，而且开了它那个电脑GPU加速，正常电脑都还好，性能较差的电脑（公司的部分电脑，你懂得）可能会加载个好几分钟，而且也会影响页面的渲染（我开启GPU后，我有个值是专门控制页面loading的，true为显示，false为隐藏，我打印那个值，查看明明是false，但页面却还是有loading效果，等G6定位完了loading才去掉，那明显这个GPU加速影响到了页面的更新）。
果然想要页面有酷酷的效果，电脑性能还是要跟的上才行，不然太强人所难了。
最后看下我最终做出的效果图：
在这里插入图片描述

我这次的开发，包含了如下功能：

节点支持拖拽
空白画布支持拖拽
不同节点可有不同图标和状态（这里用的是自定义节点）
收起展开右下角图标会变，收起显示数量，展开显示减号（也是利用自定义节点，而且图标是相对主图标定位上去的）
收起展开会把当前节点的子节点隐藏显示（结合了节点的点击事件和graph实例下的showItem、hideItem去控制节点的显示隐藏）
搜索相关数据会高亮，其实这也是自定义节点里面就配置好了，我只需更新数据里的搜索的相关数据的属性即可。
可全屏展示，这里是用了 graph 实例下的 changeSize 方法，点击全屏按钮时重新更新视图的宽高即可，不会有二次加载的情况。
划入节点可展示详情。利用了节点划入事件，异步请求后端数据，在配合 G6 的 Tooltip 插件，最后数据请求回来后
refreshItem 更新它的配置即可，有点像自定义节点。
放大镜效果。G6 的插件还提供了鱼眼放大镜的效果，但其实用来之后，感觉也就一般般，和能放大指定范围节点的预期差了很多。

上面有说过，我也做了树图，毕竟树图的数据简单，不用我自己去设置 edges ，而且也符合我这的需求，一个节点就只有一个父节点或子节点，并没有太多复杂的关系（如果你是有节点多对多的关系，就不能用树图了）。从数据结构上来说，很适合我所开发的业务需求。可最终做出来的效果却很糟糕，因为我的数据最后一层会很多，有几十个，那我树图无论选什么树类型或布局，都不能解决节点太多的问题。
在这里插入图片描述

当然我也试过用辐射状那种（如下图），但数量太多还是会密密麻麻在外面形成一圈（还是在同一个维度，只不过由横竖变成圆了），而且需求也不喜欢这种的。
在这里插入图片描述

所以最终只能使用一般图了。幸好最后做出来的效果还是很不错的！

20世纪中二少年luohongxin

关注

11
点赞
踩
40

收藏

觉得还不错? 一键收藏
14
评论
G6使用心得（hx的拓扑图历险记）如何开发前端拓扑图、关系图

简介引用G6官方简介中的第一句话，G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。背景在一般的开发过程中，大多数人都会使用 echarts 或 highcharts 等图表插件去开发 “漂亮的” 数据展示。那我前段时间也接触了一个关于用拓扑图漂亮的去展示数据的需求任务，其实 echarts 中的 graph 关系图，的确也能够实现需求所要的基本效果。所以在第一个拓扑图开发时，由于时间紧迫（开发时间
复制链接

扫一扫