一种基于Antv的自定义可视化拓扑图的实现方法技术

本发明专利技术提供了一种基于Antv的自定义可视化拓扑图的实现方法，其特征在于，其实现方法包括：模块一：拓扑设备基础信息模块，用于初始化拓扑元素的基础信息内容，采用用户自定义的设备信息来进行绘制；模块二、拓扑图渲染模块，用于数据加载和渲染，将数据的加载和图的渲染分开进行；模块三、拓扑拖拽控制模块，给与每个设备元素绑定拖拽事件；模块四、拓扑链接控制模块，用于将元素链接起来；模块五、拓扑图数据化模块，包括了数据存储以及重新获取更新拓扑图链接信息。本发明专利技术提供依据用户自定义的设备信息进行拓扑图自定义，而不拘泥于拓扑图中的固定的结构样式；可以跟自身业务解耦；也可以共同组合成一个公共组件，便于更多的其他系统进行调用。进行调用。进行调用。

【技术实现步骤摘要】
一种基于Antv的自定义可视化拓扑图的实现方法


[0001]本专利技术涉及互联网领域，具体涉及一种基于Antv的自定义可视化拓扑图的实现方法。

技术介绍

[0002]伴随着互联网时代的出现和发展，无论是开发还是设计，我们都会使用到拓扑图，拓扑图能够形象的呈现各种关系，一目了然的让人了解各种结构的组成。而在系统开发中，常常需要展现设备的网络拓扑结构，俗称网络拓扑图。
[0003]网络拓扑图将以全局管理视角出发，自动生成物理拓扑图，以可视化动态展现资源的结构分布、链路关系、性能指标和运行状态等，并能通过颜色策略、动态流量、告警提示变化来表示每个资源的异常等级，做到故障快速定位。
[0004]完成拓扑图可以使用很多种方式，无论是PC(例如visio)还是Web(例如processon)都有可以用的软件来完成，但是这样的图却是静态的，并不能满足系统中需要动态网络拓扑图的呈现。如需要根据自身业务提供比如链路颜色动态设置、设备模型动态选型，设备告警状态呈现等都无法完成。
[0005]Antv是一个图可视化引擎，它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的Insight。基于G6，用户可以快速搭建自己的图分析或图编辑应用。

技术实现思路

[0006]本专利技术的目的在于提供一种基于Antv的自定义可视化拓扑图的实现方法，以解决上述
技术介绍
中提出的问题。
[0007]为实现上述目的，本专利技术采用了如下技术方案：
[0008]一种基于Antv的自定义可视化拓扑图的实现方法，其特征在于，其实现方法包括以下5个模块：拓扑设备基础信息模块，拓扑图渲染模块，拓扑拖拽控制模块，拓扑链接控制模块，拓扑图数据化模块；
[0009]模块一：拓扑设备基础信息模块，用于初始化拓扑元素的基础信息内容，也是用户自定义的可扩展的信息，采用用户自定义的设备信息来进行绘制，包括列表呈现和初始化数据关联；
[0010]模块二、拓扑图渲染模块，用于数据加载和渲染，将数据的加载和图的渲染分开进行；
[0011]模块三、拓扑拖拽控制模块，用于给与每个设备元素绑定拖拽事件，定义参数和内容进行扩展图形想要的样式；
[0012]模块四、拓扑链接控制模块，用于增加鼠标移动到拓扑元素上的动作以及鼠标移出动作，将两个拓扑元素链接起来；
[0013]模块五、拓扑图数据化模块，包括了数据存储以及重新获取更新拓扑图链接信息。
[0014]所述拓扑设备基础信息模块，具体实现方法如下：
[0015]1)列表呈现：
[0016]a、可扩展的设备信息管理，这个模块是不包含在整个拓扑图模块的，而是有一个单独的设备管理模块，该模块是对设备信息进行扩展的，常规的有设备名称name、设备类型type、设备Mac、设备编码code等,可扩展信息包括设备的状态，设备的告警级别level，设备的图片image(拓扑图中展示的图形)等，这边根据实际需求进行扩展，还可以添加比如设备是否可以跟其他设备关联，是否可以成为子集设备等复杂关联配置；
[0017]b、vue是一套用于构建用户界面的渐进式框架，在vue中通过fetch函数获取远程的设备数据，这些数据包括了name(元素名称)、size(元素图片尺寸)、cid(元素唯一识别)、status(元素当前状态)、shape(拓扑图形类型)等，其他元素信息基本都包含在上述(a)的配置中，整理这些数据，将(a)中的设备扩展信息和(b)中的远程设备数据划分为一个数组，然后采用前端编码的形式(页面中的<ul>方式)将获取的数组在页面中绘制成一个列表；
[0018]2)初始化数据关联：通过步骤b所述数组绘画出设备，在列表中呈现，列表中所呈现的设备应该是未出现在拓扑中的数据，所以在拓扑图中进行设备添加和删除的时候，需要动态的触发事件来更新关联的设备数据，方式就是采用公共组件通讯eventBus的$emit来传递触发的数据，其数据格式为
[0019][{name,label,size,type,cid,ip,mac,status,deplay,typeName,description,manu facture,x:0,y:0,shape:customNode,image,inPoints:[0.5,0.5],outPoints:[0.5,0.5]},{}...]。
[0020]所述拓扑图渲染模块，具体实现方法如下：
[0021]1)拓扑图容器：需要在HTML中创建一个用于容纳G6绘制的图的容器，通常div标签；G6在绘制时会在该容器下追加canvas标签，然后将图绘制在其中；
[0022]2)拓扑图数据准备：引入G6的数据源为JSON格式的对象；该对象中需要有节点(nodes)和边(edges)字段，分别用数组表示；nodes数组中包含节点对象，唯一的id是每个节点对象中必要的属性，x、y用于定位；edges数组中包含边对象，source和target是每条边的必要属性，分别代表了该边的起始点id与目标点id；
[0023]3)拓扑图实例化：图实例化时，至少需要为图设置容器、宽、高；采用G6.Graph来实例化拓扑图；
[0024]4)拓扑图渲染：数据的加载和图的渲染是两个步骤，可以分开进行，graph.data(initData)加载数据，graph.render()渲染数据，具体为先进行数据加载再进行图的渲染。
[0025]所述拓扑拖拽控制模块，具体实现方法如下：
[0026]1)模块一中进行设备列表加载的时候，给与每个设备元素绑定拖拽事件，分别是拖拽开始事件@dragstart和拖拽结束事件@dragend；
[0027]2)dragstart事件开始触发时拖拽的设备元素可以进行移动，并且实时获取offsetX和offsetY用于元素停止移动后记录当前的位置信息；dragend拖拽结束需要触发拓扑图元素添加操作executeCommand以及联动模块一中数据关联更新，更新模块一中的列表信息，即删除已经被拖拽移走的设备；
[0028]3)上述自定义executeCommand的方法中，添加add需要完成的内容，当内置节点不
满足需求时，通过G6.registerNode(nodeName,options,extendedNodeName)方法自定义节点；
[0029]4)绘制拓扑图动态扩展图形；
[0030]根据Antv G6中addShape可以支持的图元素类型包括'rect'、'circle'、'fan'、'ellipse'、'marker'、'image'，'marker'、'path'、'text'、'dom(svg)'；
[0031]通过addShape增加image用于显示拓扑元素图片，即我们拓扑图中显示的设备图片信息；Attrs参数为{id，x,y,width,heigh本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于Antv的自定义可视化拓扑图的实现方法，其特征在于，其实现方法包括以下5个模块：拓扑设备基础信息模块，拓扑图渲染模块，拓扑拖拽控制模块，拓扑链接控制模块，拓扑图数据化模块；模块一：拓扑设备基础信息模块，用于初始化拓扑元素的基础信息内容，也是用户自定义的可扩展的信息，采用用户自定义的设备信息来进行绘制，包括列表呈现和初始化数据关联；模块二、拓扑图渲染模块，用于数据加载和渲染，将数据的加载和图的渲染分开进行；模块三、拓扑拖拽控制模块，用于给与每个设备元素绑定拖拽事件，定义参数和内容进行扩展图形想要的样式；模块四、拓扑链接控制模块，用于增加鼠标移动到拓扑元素上的动作以及鼠标移出动作，将两个拓扑元素链接起来；模块五、拓扑图数据化模块，包括了数据存储以及重新获取更新拓扑图链接信息。2.根据权利要求1所述的基于Antv的自定义可视化拓扑图的实现方法，其特征在于：所述拓扑设备基础信息模块，具体实现方法如下：1)列表呈现：a、可扩展的设备信息管理，这个模块是不包含在整个拓扑图模块的，而是有一个单独的设备管理模块，该模块是对设备信息进行扩展的，常规的有设备名称name、设备类型type、设备Mac、设备编码code等,可扩展信息包括设备的状态，设备的告警级别level，设备的图片image(拓扑图中展示的图形)等，这边根据实际需求进行扩展，还可以添加比如设备是否可以跟其他设备关联，是否可以成为子集设备等复杂关联配置；b、在vue中通过fetch获取远程的设备数据，这些数据包括了name(元素名称)、size(元素图片尺寸)、cid(元素唯一识别)、status(元素当前状态)、shape(拓扑图形类型)等，其他元素信息基本都包含在上述(a)的配置中，整理这些数据成数组，然后通过页面遍历绘制所需的列表；2)初始化数据关联：列表中所呈现的设备应该是未出现在拓扑中的数据，所以在拓扑图中进行设备添加和删除的时候，需要动态的触发事件来更新关联的设备数据，方式就是采用公共组件通讯事件总线(eventBus)的自定义事件($emit)来传递触发的数据，其数据格式为：[{name,label,size,type,cid,ip,mac,status,deplay,typeName,description,manu facture,x:0,y:0,shape:customNode,image,inPoints:[0.5,0.5],outPoints:[0.5,0.5]},{}...]。3.根据权利要求1所述的基于Antv的自定义可视化拓扑图的实现方法，其特征在于：所述拓扑图渲染模块，具体实现方法如下：1)拓扑图容器：需要在HTML中创建一个用于容纳G6绘制的图的容器，通常div标签；G6在绘制时会在该容器下追加canvas标签，然后将图绘制在其中；2)拓扑图数据准备：引入G6的数据源为JSON格式的对象；该对象中需要有节点(nodes)和边(edges)字段，分别用数组表示；nodes数组中包含节点对象，唯一的id是每个节点对象中必要的属性，x、y用于定位；edges数组中包含边对象，source和target是每条边的必要属性，分别代表了该边的起始点id与目标点id；
3)拓扑图实例化：图实例化时，至少需要为图设置容器、宽、高；采用G6.Graph来实例化拓扑图；4)拓扑图渲染：数据的加载和图的渲染是两个步骤，可以分开进行，graph.data(initData)加载数据，graph.render()渲染数据。4.根据权利要求1所述的基于Antv的自定义可视化拓扑图的实现方法，其特征在于：所述拓扑拖拽控制模块，具体实现方法如下：1)模块一中进行设备列表加载的时候，给与每个设备元素绑定拖拽事件，分别是拖拽开始事件@dragstart...

【专利技术属性】
技术研发人员：张广兴，姜海洋，严春波，张玉军，谭航，梁帅，王嘉，夏可强，
申请(专利权)人：江苏省未来网络创新研究院，
类型：发明
国别省市：