G6详解目录
写在前面
涉及知识：
效果图
1、G6是什么？
1.1、g6的概念
1.2、g6的应用
2、G6基础示例demo
2.1、引入组件包（js）
2.2、创建画布div
2.3、创建G6节点
2.4 常用节点属性说明
2.5、设置数据节点和连线
2.6、代码最终实现
3、G6官网
4、作者寄语
这两天接到了公司领导的需求，我们要去做一个拓扑展示，要求要好看直观，其实一开始我是想过自己去写的，奈何时间不允许，于是乎我就想到了还是利用组件吧，毕竟组件的功能强大，且API文档也比较全面，于是我就想到了之前学的GOJS，但是我发现我的需求只是展示，并不用自己去画拓扑，后面想了下还是用蚂蚁团队开发的G6吧，相对来说节目比较舒服，而且大厂出品的，后续维护性较强。
那么今天我就和大家说说这个组件的开篇，认识G6是什么，主要能干啥子事情。
Antv G6概念与理解，利用antv G6进行画图，如何绘制拓扑图，前端有何画出一个高质量的拓扑图，页面如何实现树状拓扑结构，G6使用指南之初识G6。
因为我要做的是一个拓扑，一个集群包含多个模块的，如下图所示：
这篇文章我主要是从节点、联系、样式三个方面入手来展开，后面还有更多关于G6的文章分享，关注博主不迷路，让您在前端领域畅游。
声明：原创于博主《IT黄大大》，如有转载请注明出处，感谢大家的支持，更多专栏可文尾唯心宫众z号《IT黄大大》
它是一款可以开箱即用的由蚂蚁金服提供的，全新一代数据可视化解决方案，是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight；
我们可以通过他快速创建出自己的图分析和编辑引用，其中具体我们可以实现树状图，拓扑图，力导图，脑图，动画，自定义等多个方面，具体应用场景可如下：
封装的组件大多数都是有文件依赖的，这个我们主要引入g6-4.3.2.min.js文件即可，当然肯定也有不同的版本迭代，如有需要可以留言邮箱哟，放在自己的文件夹里面。
主要用于存放canvas元素的，说到底就是所有的图形都是存放在这个div元素里。如下直接创建ID为container的div标签
<divid="container"style=""></div>
下面这个是我们构建G6画布初始化函数，基于我们创建的div来的，如下首先声明元素，定义宽高，然后创建一个graph的canvas。
constcontainer=document.getElementById('container');constwidth=container.scrollWidth;constheight=container.scrollHeight||500;constgraph=newG6.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',},},});
linkCenter：画布是否默认居中。
defaultNode：默认节点属性设置，比如我设置的节点的形状（type），大小（size），样式（style）等，在我的基础demo里面我设置了type为’modelRect’，也就是矩形。
linkPoints是node的属性，针对连接节点的位置，大小，填充等的设置。
labelCfg：针对node节点里面的文字样式的设置，颜色，大小，位置等方面。
nodeStateStyles：针对节点的样式，可以设置hover属性，用于鼠标悬浮后样式的设置。
其实还有一个后面会常用到的plugins属性，字面上意思就是组件，可以理解为自定义组件，比如说我们封装一个自定义悬浮框，在外面定义了，如果要生效的话必须得在这个地方声明。不然怎么都不会有效果，这个属性我后续的文章会深入展开说明。
声明：原创于博主《IT黄大大》，如有转载请注明出处，感谢大家的支持，更多专栏可关注文尾唯心宫众号《IT黄大大》
在这个地方我们要了解一点的就是所有的节点都是一个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',},],};
通过这个数据结构我们就不难发现节点数及各个节点之间的关系。
最后我们需要调用这个函数让其生效，也就是页面能够画出来。
graph.data(data);graph.render();
第一步data是提供数据，第二步render是根据提供的数据渲染视图；
最终页面效果如下：
当然这只是我们学习G6的第一步，后面还会陆续更新更多更复杂的demo，关注不迷路，期待与大家一起学习，一起进步！！！
蚂蚁团队开发的一套开源组件，官网的一些资料相对还是较全的，包括示例、API等，对我们使用起来还是提供了很大的帮助。
Antv g6官网地址：
https://antv-g6.gitee.io/zh/examples/gallery
如果我的这篇博客对您有帮助、而且您喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！当然如果这个文章对您带来不好的体验还希望能多多包涵，一起学习进步。
【gzh | 获取更多demo源码 | 优质文章】 带您学习前端知识、软件使用安装、CSS特效、3D炫酷效果、图片展示、登录注册多种demo、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板等! 「在宫众z号里也会定期分享一些免费好看的html页面，期待您的关注哈」！
声明：原创于博主《IT黄大大》，如有转载请注明出处，感谢大家的支持，更多专栏可文尾微z心宫众z号《IT黄大大》
2024年我们一起加油，一起成长，感谢您的支持与谅解！
