随着数据分析工作的深入,越来越多的行业和企业都在构建自己领域的知识图谱,知识图谱的分析工作除了算法之外,还需要好的可视化工具来辅助进行展现和分析,以帮助分析人员更好的理解和发现数据价值,呈现数据之美。
图分析的应用场景几乎适用于任何行业,多见于以下应用方向:
基于对图分析方向工作的需要,发现好的产品收费普遍很贵,免费的几乎没有,所以决定自己开发一套图的可视化分析工具,能够快速构建自己的可视化应用。
当前核心组件主要包括以下部分:
目前组件已开源,您可以自由使用,如果有什么好的意见和建议,欢迎交流讨论,一起将GraphVis做的更好。
目前有三个独立的组件包:
当前组件包支持两种引用方式:
<script type="text/javascript" src="../visgraph-x.x.x.min.js"></script>
requirejs(['visgraph','layoutFactory','clusterFactory'],function(VisGraph,layoutFactory,clusterFactory) {//do something});
//图数据格式 var graphData = { nodes:[{id:'1',label:'张无忌',type:'男',size:50,x:50,y:200}, {id:'2',label:'赵敏',type:'女',size:40,x:250,y:200}, {id:'3',label:'周芷若',type:'女',size:40,x:450,y:200}], links:[{source:'1',target:'2',label:'喜欢',weight:10}, {source:'1',target:'3',label:'爱',weight:10}] }; //一、原生js使用方式 //可视化加载数据 var visgraph = new VisGraph(document.getElementById('container'),null); //需要指定画布的包裹元素id visgraph.drawData(graphData); //动态布局 var layout=new layoutFactory(visgraph.getGraphData()).createLayout('fr'); layout.initAlgo(); //初始化布局参数 layout.resetConfig(config);//重新设置布局参数 var i=0; while(i++<1000){ layout.runLayout(); //执行1000次布局 } //二、requirejs 使用方式(与上面方法二选一) requirejs(['visgraph','layoutFactory'],function(VisGraph,layoutFactory) { //初始化图,加载图数据 var visgraph = new VisGraph(document.getElementById('container'),null); //需要指定画布的包裹元素id visgraph.drawData(graphData); //动态布局 var layout=new layoutFactory(visgraph.getGraphData()).createLayout('fr'); layout.initAlgo(); //初始化布局参数 layout.resetConfig(config);//重新设置布局参数 layout.runLayout();//执行布局 var loopName=null; function loop(){ cancelAnimationFrame(loopName); layout.runLayout(); loopName = requestAnimationFrame(loop); }; loopName = requestAnimationFrame(loop); });