原创

GraphVis布局算法的使用

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

GraphVis提供了丰富强大的布局算法库,用户可以根据数据特点选择性使用,以求达到对数据的合理布局和优美效果,不同的算法对于同一份数据,有着千差万别的布局效果,一种算法,不同的参数,效果也不尽相同,这个需要使用人员针对自己数据的特点,选择合理的算法和调试出最佳的参数,进行使用,以求达到对数据能够清晰呈现,减少视觉错乱感。

布局算法的使用

第一步:引入布局算法库

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

第二步:初始化布局算法

/*
* 定义图数据,目前是通过visGraph对象直接获取的图可视化元素点和边
* var graphData = visGraph.getVisibleData();
*/
const graphData = {nodes:[],links:[]};

//选择布局算法类型
var layoutType='fastFR';

//创建布局算法
var layout = new LayoutFactory(graphData).createLayout(layoutType);

//初始化布局算法参数或者重设布局参数
layout.initAlgo();

/*
* 说明:
* 1.layout.initAlgo() 是使用默认的布局参数
* 2、如果要修改算法参数,需要重设布局参数,如下:
* var config = {'froce':0.95,'linkDistance':150,'linkStrength':0.09,'charge':-300,gravity:0.015};
* layout.resetConfig(config); 
*
*/

第三步:执行布局算法,调整可视化效果

布局算法的核心原理就是根据算法使用的力学原理或者其他数据原理,进行不断迭代,让图的达到某种数学意义的上平衡,使其看起来对称或者协调,让关系的结构更清晰明了,就达到了布局算法的目的。所以布局算法的执行在GraphVis分为两种方式。

方式一:循环迭代n次,控制布局计算的终止

var layout=new LayoutFactory(visGraph.getVisibleData()).createLayout("fastFR");
layout.initAlgo();

//执行300次布局算法,一次性将图的布局效果完成
let i=0;
while(i++ < 300){
  layout.runLayout(); //执行布局算法
}

方式二:通过动画帧控制布局算法的执行

//初始化布局算法
var layout=new LayoutFactory(visgraph.getVisibleData()).createLayout("fastFR");
layout.initAlgo();

//通过动画帧控制控制布局算法的执行,有动画效果
let loopName='';
function loop(){
  cancelAnimationFrame(loopName);
  layout.runLayout();  //运行布局算法
  visGraph.refresh(); //刷新视图(优化版本中需要手动刷新视图,原有版本自动刷新性能消耗较大)
  loopName = requestAnimationFrame(loop);	    		
};
loopName = requestAnimationFrame(loop);

布局算法对象的方法

如上面已介绍如何进行布局算法对象的创建,创建布局算法对象layout后,就可以调用其提供的方法就行布局计算和调整。

方法名称

属方法说明

使用示例

getConfig()

获取布局算法的参数配置

var config = layout.getConfig();

resetConfig(config)

重新设置布局算法的参数

layout.resetConfig({'size':1000});

initAlgo()

初始化布局算法的参数

layout.initAlgo();

runLayout()

执行布局算法

layout.runLayout();

布局算法支持的类型

算法类型

说明

fastFR

快速弹性布局,采用力学模型、碰撞检测处理,性能优异,适用于大规模网络布局

frDirect

弹簧力学布局,采用力学模型实现

fruchtermanReingold

力导向布局算法FruchtermanReingold的实现

fr

经典网络布局,使用与中小规模的网络布局,效果优异

kk

关系路径布局,使用最短路径进行布局,效果较好,适用于中小规模网络

arf

球面网络布局,网络布局在一个圆球面上分布

gather

群体分组布局,节点需要指定cluster属性后按该属性分组

concentric

中心圆形布局,可指定圆心节点个数

singleCirlce

单个的圆形布局

dualCirlce

双圆环布局,指定圆环内部或外部的节点个数,按度进行排列

tree

标准树形布局,标准树形结构,一个或多个根节点

hubsize层级布局,适用于组织架构布局

radiatree

树形结构,径向布局

grid

矩形布局

noverlap

节点不重叠布局,调整使节点互相不重叠

布局算法参数的获取及使用

var layoutType = 'fastFR';
//1、创建布局算法
var layout=new LayoutFactory({nodes:[],links:[]}).createLayout(layoutType);

//2、获取布局算法的参数配置项
var config = layout.getConfig(); 

//3、查看布局算法参数配置项,可以重置参数
configs.forEach(function(config){
    console.log(config);//打印每一个参数,查看参数名及参数key
		for(var param in config){
			if(param == 'label'){
         
			}else{
				var paramValue =config[param];
                                console.log(paramValue);
        
                               //如果是参数项支持多值,那需要选中其中之一设置
				if(paramValue instanceof Array){
					paramValue.forEach(function(option){
						 
					});
				}
			}
		}
	});

//4、知道了参数项叫什么名称后,可以自定义参数重新设置调整布局效果
layout.resetConfig(config);

一组数据,多种效果,不同的布局算法,不一样的展示效果,您可以根据自己的数据特点调校算法参数,以达到最佳的展示效果,布局算法会赋予你这样的能力,剩下的就需要去花时间调试了...


效果图例

正文到此结束