GraphVis布局算法的使用

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后，就可以调用其提供的方法就行布局计算和调整。

布局算法支持的类型

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

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);

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

效果图例