写在前面

这两天接到了公司领导的需求，我们要去做一个拓扑展示，要求要好看直观，其实一开始我是想过自己去写的，奈何时间不允许，于是乎我就想到了还是利用组件吧，毕竟组件的功能强大，且API文档也比较全面，于是我就想到了之前学的GOJS，但是我发现我的需求只是展示，并不用自己去画拓扑，后面想了下还是用支付宝团队开发的G6吧，相对来说节目比较舒服，而且大厂出品的，后续维护性较强。
那么今天我就和大家说说这个组件的开篇，认识G6是什么，主要能干啥子事情。

涉及知识：

Antv G6概念与理解，利用antv G6进行画图，如何绘制拓扑图，前端有何画出一个高质量的拓扑图，页面如何实现树状拓扑结构，G6使用指南之初识G6。

效果图

因为我要做的是一个拓扑，一个集群包含多个模块的，如下图所示：

这篇文章我主要是从节点、联系、样式三个方面入手来展开，后面还有更多关于G6的文章分享，关注博主不迷路，让您在前端领域畅游。
声明：原创于博主《IT黄大大》，如有转载请注明出处，感谢大家的支持，更多专栏可关注文尾唯心宫众号《IT黄大大》

1、G6是什么？

1.1、g6的概念

它是一款可以开箱即用的由蚂蚁金服提供的，全新一代数据可视化解决方案，是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight；

1.2、g6的应用

我们可以通过他快速创建出自己的图分析和编辑引用，其中具体我们可以实现树状图，拓扑图，力导图，脑图，动画，自定义等多个方面，具体应用场景可如下：

2、G6基础示例demo

2.1、引入组件包（js）

封装的组件大多数都是有文件依赖的，这个我们主要引入g6-4.3.2.min.js文件即可，当然肯定也有不同的版本迭代，如有需要可以留言邮箱哟，放在自己的文件夹里面。

2.2、创建画布div

主要用于存放canvas元素的，说到底就是所有的图形都是存放在这个div元素里。如下直接创建ID为container的div标签

<div id="container" style=""></div>

2.3、创建G6节点

下面这个是我们构建G6画布初始化函数，基于我们创建的div来的，如下首先声明元素，定义宽高，然后创建一个graph的canvas。

const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({// 使用 contextMenu plugins 时，需要将 container 设置为 position: relative;container: 'container',width,height,linkCenter: true,defaultNode: {type: 'modelRect',size: [270, 80],style: {radius: 5,stroke: '#69c0ff',fill: '#ffffff',lineWidth: 1,fillOpacity: 1,},// label configurationslabelCfg: {style: {fill: '#595959',fontSize: 14,},offset: 30,},// left rectpreRect: {show: true,width: 4,fill: '#40a9ff',radius: 2,},// configurations for the four linkpointslinkPoints: {top: false,right: false,bottom: false,left: false,// the size of the linkpoints' circlesize: 10,lineWidth: 1,fill: '#72CC4A',stroke: '#72CC4A',},},modes: {default: ['drag-canvas', 'drag-node'],},nodeStateStyles: {hover: {lineWidth: 2,stroke: '#1890ff',fill: '#e6f7ff',},},});

2.4 常用节点属性说明

linkCenter：画布是否默认居中。
defaultNode：默认节点属性设置，比如我设置的节点的形状（type），大小（size），样式（style）等，在我的基础demo里面我设置了type为’modelRect’，也就是矩形。
linkPoints是node的属性，针对连接节点的位置，大小，填充等的设置。
labelCfg：针对node节点里面的文字样式的设置，颜色，大小，位置等方面。
nodeStateStyles：针对节点的样式，可以设置hover属性，用于鼠标悬浮后样式的设置。
其实还有一个后面会常用到的plugins属性，字面上意思就是组件，可以理解为自定义组件，比如说我们封装一个自定义悬浮框，在外面定义了，如果要生效的话必须得在这个地方声明。不然怎么都不会有效果，这个属性我后续的文章会深入展开说明。
声明：原创于博主《IT黄大大》，如有转载请注明出处，感谢大家的支持，更多专栏可关注文尾唯心宫众号《IT黄大大》

2.5、设置数据节点和连线

在这个地方我们要了解一点的就是所有的节点都是一个json数据，在G6的概念里面有个专门的data数据，然后通过graph.data()函数去加载就可以，前提是data的属性需要nodes和edges，一个是用于节点，一个是用于画线建立链接。
具体结构如下：

Const  data = {nodes: [{id: 'node1',label: '集群',x: 450,y: 200,type: 'rect',},{id: 'node2',label: 'CN节点',x: 150,y: 50,type: 'rect',},{id: 'node3',label: 'DN节点',x: 150,y: 350,type: 'rect',},{id: 'node4',label: 'CM',x: 1000,y: 50,type: 'rect',},{id: 'node5',label: 'GTM',x: 1000,y: 180,type: 'rect',},{id: 'node6',label: 'ETCD',x: 1000,y: 350,type: 'rect',}],edges: [{source: 'node1',target: 'node2',label: 'CN节点',},{source: 'node1',target: 'node3',label: 'DN节点',},{source: 'node1',target: 'node4',label: 'CM',},{source: 'node1',target: 'node5',label: 'GTM',},{source: 'node1',target: 'node6',label: 'ETCD',},],
};

通过这个数据结构我们就不难发现节点数及各个节点之间的关系。

2.6、代码最终实现

最后我们需要调用这个函数让其生效，也就是页面能够画出来。

graph.data(data);
graph.render();

第一步data是提供数据，第二步render是根据提供的数据渲染视图；
最终页面效果如下：

当然这只是我们学习G6的第一步，后面还会陆续更新更多更复杂的demo，关注不迷路，期待与大家一起学习，一起进步！！！

3、G6官网

蚂蚁团队开发的一套开源组件，官网的一些资料相对还是较全的，包括示例、API等，对我们使用起来还是提供了很大的帮助。
Antv g6官网地址：
https://antv-g6.gitee.io/zh/examples/gallery

4、作者寄语

如果我的这篇博客对您有帮助、而且您喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！当然如果这个文章对您带来不好的体验还希望能多多包涵，一起学习进步。
【关注我 | 获取更多demo源码 | 优质文章】 带您学习前端知识、软件使用安装、CSS特效、3D炫酷效果、图片展示、登录注册多种demo、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板等! 「在宫众号<IT黄大大>里也会定期分享一些免费好看的html页面，期待您的关注哈」！
声明：原创于博主《IT黄大大》，如有转载请注明出处，感谢大家的支持，更多专栏可关注文尾唯心宫众号《IT黄大大》
2024年我们一起加油，一起成长，感谢您的支持与谅解！