原创

GraphVis基础使用

温馨提示:
本文最后更新于 2021年12月05日,已超过 166 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

使用GraphVis开发关系图数据可视化应用,其包含三部分:

  1. 图可视化组件库:将关系数据在画布上绘制成可视化元素,可指定大小、颜色、边框、字体、图片、坐标等。
  2. 图布局算法库:基于可视化元素及其内置数据结构,实现了多种常用布局算法,如:力导图、树状图、圆形图等,让可视化元素更易于查看和分析,也让展现变的更生动美丽。支持自定义调校算法参数,使其满足实际数据可视化展现的需要,多种算法组合使用,效果更好。
  3. 图聚类算法库:基于可视化元素及内置数据结构,实现常见的图数据的聚类算法,在复杂网络分析过程中,让紧密的关系划分更清晰,更易于分析,也可做群组推荐、社区划分等应用。
本章介绍使用可视化组件快速绘制关系图:

第一步:界面引用组件库文件

<script type="text/javascript" src="visgraph.min.js"></script>

第二步:准备关系数据

//定义关系数据,包含节点(nodes)和 关系(links),可自定义属性,颜色、坐标,文字等
var graphData = {
   nodes:[
              {id:'1',label:'刘备',type:'兄',x:100,y:200,properties:{name:'刘玄德'}},
              {id:'2',label:'关羽',type:'弟',x:300,y:200,properties:{name:'关云长'}},
              {id:'3',label:'张飞',type:'弟',x:500,y:200,properties:{name:'张翼德'}}
   ],
   links:[
	{source:'1',target:'2',label:'兄弟',properties:{desc:'结拜'}},
        {source:'1',target:'3',label:'兄弟'}
   ]
};

第三步:在页面div层上绘制可视化视图

//页面中需要包裹画布的元素
<div id="graph-panel" style="width:800px;height:600px;"></div>

//创建GraphVis对象,进行方法调用
let visGraph = new VisGraph(document.getElementById('graph-panel'));

//调用绘图方法,绘制关系图
visGraph.drawData(graphData);

绘制效果图

正文到此结束