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黄大大》，如有转载请注明出处，感谢大家的支持，更多专栏可关注文尾唯心宫众号《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标签
bash
<div id="container" style=""></div>2.3、创建G6节点
下面这个是我们构建G6画布初始化函数，基于我们创建的div来的，如下首先声明元素，定义宽高，然后创建一个graph的canvas。
php
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 configurations
labelCfg: {
style: {
fill: '#595959',
fontSize: 14,
},
offset: 30,
},
// left rect
preRect: {
show: true,
width: 4,
fill: '#40a9ff',
radius: 2,
},
// configurations for the four linkpoints
linkPoints: {
top: false,
right: false,
bottom: false,
left: false,
// the size of the linkpoints' circle
size: 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，一个是用于节点，一个是用于画线建立链接。
具体结构如下：
bash
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、代码最终实现
最后我们需要调用这个函数让其生效，也就是页面能够画出来。
ini
graph.data(data);
graph.render();第一步data是提供数据，第二步render是根据提供的数据渲染视图；
最终页面效果如下：
当然这只是我们学习G6的第一步，后面还会陆续更新更多更复杂的demo，关注不迷路，期待与大家一起学习，一起进步！！！
3、G6官网
蚂蚁团队开发的一套开源组件，官网的一些资料相对还是较全的，包括示例、API等，对我们使用起来还是提供了很大的帮助。
Antv g6官网地址：
antv-g6.gitee.io/zh/examples...
4、作者寄语
如果我的这篇博客对您有帮助、而且您喜欢我的博客内容，请 "点赞" "评论" "收藏" 一键三连哦！当然如果这个文章对您带来不好的体验还希望能多多包涵，一起学习进步。
【关注我 | 获取更多demo源码 | 优质文章】 带您学习前端知识、软件使用安装、CSS特效、3D炫酷效果、图片展示、登录注册多种demo、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板等! 「在宫众号<IT黄大大>里也会定期分享一些免费好看的html页面，期待您的关注哈」！
声明：原创于博主《IT黄大大》，如有转载请注明出处，感谢大家的支持，更多专栏可关注文尾唯心宫众号《IT黄大大》
2024年我们一起加油，一起成长，感谢您的支持与谅解！