使用antV-G6在angualr中画树形关系图

使用antV-G6在angualr中画树形关系图（流量追踪图）

公司有个需求就是既要呈现出每个节点之间的关系（图里面需要带箭头，为了表现出流向关系），又要排版呈现出树状结构，也就是说是具备层次关系的，这种图呢就相当于既不完全是树图，形状呢又不是关系图，我算是苦思冥想了。而且又是在angualr中，angualr中支持的第三方插件特别少，本来想采用echarts的树状图，但是发现，树图的每个节点不能有两个父节点，也就是说两个节点不能同时指向一个节点，后来就放弃了，接着我想采用echarts里面的关系图，但是发现关系图需要自己去定义每一个节点的坐标，这对于我们公司的需求有很多节点的情况下，是完全不可能实现的，后来引用了antV的G6，加上自己本身的一些构思，实现了以下效果：

在angualr的你需要放入该图的组件的ts文件中的开头，需要加上以下两句话，insertCss可以先不写，这个是为了后面显示提示框而导入的，如果需要的话就安装（npm install insert-css）并导入，不需要可以省略。

import G6 from '@antv/g6';  // npm install --save @antv/g6  先安装后引入啊！！！
import insertCss from 'insert-css';  //npm install insert-css  先安装后引入啊！！！

首先定义一个全局变量的data，用于存放流程图的节点和边

 data = {// 点集nodes: [],// 边集edges: [],};

然后是html结构

<div class="tracing_right"><div id="mountNode" style="width: 98%;height:100%;margin: 0 auto;overflow-x: scroll;overflow-y: scroll"></div>
</div>

然后需要定义一个render函数，当然可以随意取函数的名称，这里面的代码大多是参考G6里面的示例代码https://g6.antv.vision/zh/examples/net/dagreFlow#lrDagre，参数说明如下：

render(){
//这个是用于定义我图中的提示框，就是气泡的样式insertCss(`.g6-tooltip {border: 1px solid #8962FD;border-radius: 4px;font-size: 12px;color: #8962FD;background-color: rgba(255, 255, 255, 0.8);padding: 10px 8px;box-shadow: rgb(219, 208, 254) 0px 0px 10px;width:180px;height:60px;position:absolute;left:-100px;top:100px}`);const width = document.getElementById('mountNode').scrollWidth;const height = document.getElementById('mountNode').scrollHeight || 500;const graph = new G6.Graph({container: 'mountNode',width,height,fitView: true, //设置是否将图充满整个画布modes: {//这个是设置默认节点和默认边的地方，'zoom-canvas'这个参数的作用是可以对图进行鼠标滚动放大缩小，根据需求添加default: ['drag-canvas', 'drag-node','zoom-canvas',
//下面这个对象是设置提示框的显示内容，我用的是模板字符串显示的{type: 'tooltip',
//formatText这个函数的参数model代表的就是传入的每个节点的信息，包括名称之类的信息，在模板字符串中可以通过${model.参数名}去访问每个节点的信息，从而在提示框中显示formatText: function formatText(model) {const text =`<p style="width:180px;height:30px;float:left;line-height:30px;border-bottom:2px dashed rgba(219, 208, 254)">存活个数/总个数：${model.label}</p>`+'</br>'+`<p style="width:180px;height:30px;float:left;line-height:30px;">请求次数：${model.label}</p>`+'</br>';return text;},},],},layout: {type: 'dagre',rankdir: 'LR',align: 'DL',nodesepFunc: () => 3, //这个就是节点与节点之间的距离，可以说是纵向拉伸高度ranksepFunc: () => 30,//这个参数设置的是你的箭头距离节点的距离，值越大，图横向拉伸的越宽},defaultNode: {size: [30, 20],//节点的大小设置，宽高type: 'rect', //节点类型，rect就是长方形，还有圆形，菱形等，官网里有，也可以自定义},defaultEdge: {size: 1,    // type: 'line-growth',这个是自定义了边的动画，但是我没使用color: '#e2e2e2',     //边的颜色style: {endArrow: {         //设置边的末端箭头的样式，如果不需要箭头，不设置即可path: 'M 0,0 L 8,4 L 8,-4 Z',fill: '#e2e2e2'},},labelCfg: {autoRotate: true,  //设置边上面的标签的样式refY: 8,         //边标签的文字与边的距离style: {    fontSize:10,   //设置边标签的字体大小},},},});graph.clear(); //后面三行照常复制粘贴即可graph.data(this.data);graph.render();}

// 第一次加载获取结构图，这个是我设置的点击事件，我们公司需求就是点击按钮触发流程图的加载getStructureData=(minServiceName)=>{var self = thisvar m = 300var n = 300self.data = {nodes:[],edges :[]}self.pingArr = []console.log(self.data)self.ajax.getAjax("/management/kiali/graph","post",{"namespace":minServiceName},function(data){  //这个是我调用的接口，你们可以直接按照官网上的案例，在开头定义死数据，进行测试，我对接口里面数据的处理，你们可以不看console.log(data)for(var i=0;i<data.length;i++){self.pingData = {}self.pingData["id"] = data[i].data.idself.pingData["parentId"] = data[i].data.parentIdself.pingData["name"] = data[i].data.nameself.pingData["color"] = data[i].data.colorself.pingData["nodeType"] = data[i].data.nodeTypeself.pingData["responseTime"] = data[i].data.responseTimeself.pingArr.push(self.pingData)}console.log(self.pingArr)
//下面就是我掉完接口之后拿到的数据进行遍历，然后往直前定义的节点和边的数组中塞for(var i=0;i<self.pingArr.length;i++){if(self.pingArr[i].nodeType == "version"){ //我是对节点类型进行了判断，不同类型的节点，设置节点的颜色不一样，就如图中两种节点self.data.nodes.push({id: self.pingArr[i]["id"],label: self.pingArr[i]["name"],description: 'This is node-1.',style:{ //这个style就是专门设置节点的样式的width: 48,height: 18,radius: 10,stroke: '#8962FD', //节点边框颜色fill: '#8962FD',   //节点背景色lineWidth:5,       //边框宽度strokeOpacity:0.3, //边框透明度},labelCfg: {   //这个就是节点里面文字的样式设置style: {fill: '#fff',fontSize: 10,},position: 'center',},},)}else if(self.pingArr[i].nodeType == "service"){ //这里如上，如果不区分节点的话可以忽略self.data.nodes.push({id: self.pingArr[i]["id"],label: self.pingArr[i]["name"],description: 'This is node-1.',style: {width: 60,height: 25,radius: 10,stroke: '#8962FD',fill: '#fff',lineWidth:1.5,strokeOpacity:0.6},labelCfg: {style: {fill: '#8962FD',fontSize: 10,},position: 'center',},},)}//下面是我放入边的循环结构if(self.pingArr[i]["parentId"].length>=1){for(var j=0;j<self.pingArr[i]["parentId"].length;j++){self.data.edges.push({source: self.pingArr[i]["parentId"][j],target: self.pingArr[i]["id"],// label:  self.pingArr[i]["responseTime"],label:  '30ms',  //这个就是边上面显示的标签的内容，我写死的color:  self.pingArr[i]["color"], //设置边的颜色style: {    //设置边的箭头的样式，如果不需要箭头，这个endArrow可以不写endArrow: {path: 'M 0,0 L 8,4 L 8,-4 Z',fill: self.pingArr[i]["color"],},},},)}}}setTimeout( ()=>{self.render()},100) //这里就是调用之前定义好的render渲染函数，上面掉接口之后放入数据之后，必须要重新调用render函数去渲染画布的，不然不显示，这里我延时了100ms再调用render函数的原因就是防止加载的时候出现dom无定义的情况，必须要加上延时器。})}

这两天写关系图，对antv的G6有了不少的了解，但是我百度搜索一些关于G6的东西的时候，发现几乎没有，可能还是用的少吧，因此，我写了这个博客，欢迎大家参考G6的使用方法，它还是挺好用的！！！！

还有一种是节点可增删改的树形结构图，vue写的，可参考一下：

https://blog.csdn.net/qq_41579104/article/details/113388616

效果是这样：

使用antV-G6在angualr中画树形关系图相关推荐

如何将Excel中画好的图导入Word
在写文章时遇到过这样一个问题,在Excel中画好的图不知道怎样复制到Word中,直接复制粘贴过去的话,不是图片格式,导致后期更改不方便,博主通过摸索找到了一种很好的解决这个问题的方法: 以如下一张图为 ...
如何将Processon中画好的图转为Visio可以打开并编辑的vsdx格式
如何将Processon中画好的图转为Visio可以打开并编辑的vsdx格式很简单,在ProcessOn中将画好的图片保存为.svg格式,先看原图保存为.svg格式然后打开亿图图示软件(Edra ...
vue族谱架构_vue.js中使用d3.js画家谱关系图
项目中需要做个家谱图,网上查了好多资料没找到合适的,就自己写个简单的,方便以后查看,附上效果图首先展示父亲.配偶.子女,三代人信息,然后选择其他人可以展开他的三代关系.如下图下面是代码,这个关系图 ...
通达信导出个股某段时间的数据以及在 Excel 中画 K 线图
打开通达信软件以中盐化工这支股票为例,输入股票首字母拼音即可找到相应股票双击进入该支股票盘后数据下载点击左上角的 ' 系统 ' ,下拉菜单中选择 ' 盘后数据下载 ' 勾选 ' 日线和实时行情 ...
MatLab中画树状图方法treeplot(nodes)中描述树结构的矢量nodes的构造
按要求需要用matlab画树状图,在网络上找到两句代码: nodes = [0 1 2 2 4 4 4 1 8 8 10 10]; treeplot(nodes); 画出了如下图: 其中矢量nodes ...
python画父子关系图_将有父子关系的一维数组转换成树形结构(多维)数据
先来个函数注释 : /** * 将有父子关系的一维数组转换成树形结构(多维)数据 * console.log(JSON.stringify(setTreeData(data), null, 2)); ...
在MATLAB的figure图中画局部放大的图中图
在MATALB绘图中,有时会遇到这样的情况,需要通过放大figure图的局部,针对细节加以说明.例如:在给定的尺度下有两条或多条曲线难以区别,此时就需要对其进行局部放大来加以区分.参考网上的解决方法1 ...
在matlab中画多个图,Matlab在一个图形窗口里画多个图形的详细教程
原创Matlab在一个图形窗口里画多个图形的详细教程编辑:佚名来源:PC下载网时间:2019-11-18 13:35:08 对于Matlab软件各位应该还有不懂的地方,比如说想在一个图形窗口里画多 ...
Python 在 excel 中画饼状图折线图
excel 饼状图绘制案例1 from openpyxl import Workbook from openpyxl.chart import PieChart, Reference from op ...

使用antV-G6在angualr中画树形关系图

使用antV-G6在angualr中画树形关系图（流量追踪图）

使用antV-G6在angualr中画树形关系图相关推荐

最新文章

热门文章