图布局类型

提示

组件库提供了多种布局算法，用于对图数据进行不同视角的呈现，辅助更清晰的分析复杂关系数据。

布局算法类型说明

算法类型	算法名称	使用场景说明
fastForce	网络布局	适用于不同数据量的关系数据，描述事物间关系，比如社交网络关系、计算机网络关系、资金交易关系等各类关系网络场景
simulation	力导向布局	适用数据量较大的关系数据，能够清晰的展示图中存在的群组，便于从中观察到核心节点，关系紧密程度等信息
kawakai	最优路径布局	适用于规模不大的但关系紧密的复杂关系数据，能够有效的分散节点空间，清晰展示关系网络结构
hierarchical	层级布局	适应于层次分明，或者需要严密拓扑性质的场景，比如组织架构图、分层网络图、流程图等
concentric	同心圆布局	将节点按照度数排序，节点度数大的一群点会排列在最中心，度数小的节点会分布在最外层，使其以同心圆的方式排布，适应于快速查找出度数较多的节点
circle	环形布局	适用于查找关联关系较多的关键节点场景，例如在圆形布局的图中可以明显分辨出哪些节点关联关系较多
arf	球面引力布局	适用于较小规模的复杂网络数据，可以在规则的圆面上清晰的展示群组划分，核心节点等信息
tree	树形布局	适用于具有严格的树形结构的数据，例如组织架构图，流程图等
grid	网格布局	节点按一定排序方式按网状排列，适应于分层网络，便于看清整体层次
dagre	流向布局	适用于具有方向性的关系数据，如：流程图，资金流向等场景
radial	中心径向布局	指定中心节点，按照节点的关系层级进行分层展示，用于分析与核心人物或者事物的关系紧密程度分布
avoidlap	避免重叠	在节点距离紧凑或存在大量重叠时，可以通过该算法调整，避免节点重叠，使网络中节点更清晰的展示

如何使用布局？

组件库提供了统一的布局计算接口，支持同步计算和异步计算两种方式的计算。

1. 同步计算接口 excuteLocalLayout(layoutType,layoutConfig,endCallback), 适用于数据量较小时的布局，具有动画过程，性能消耗较高。
2. 异步计算接口 excuteWorkerLayout(graphData,layoutType,layoutConfig,relayout,endCallback)，适用于数据较大时的布局，可避免页面阻塞。

注意

以上两个接口可按照实际使用场景调用，比如数据量小于300时，使用同步计算，大于300时使用异步计算，避免浏览器阻塞操作，造成界面卡顿。

布局接口的应用

// 初始化客户端对象
let graphVis = new GraphVis({
    container:document.getElementById('divId'), //画布层
    licenseKey:'licensekey' //授权license
});

//布局参数，不设置时，内部使用默认参数(具体可查看【布局参数说明】)
var layoutConfig = null;

// 对数据进行异步布局计算
var graphData = {nodes:graphVis.nodes,links:graphVis.links};
graphVis.excuteWorkerLayout(graphData,'fastForce',layoutConfig, false, function () {
    graphVis.zoomFit(); //布局结束后居中显示
});

// 对图进行快速网络布局
graphVis.excuteLocalLayout('fastForce',layoutConfig, function () {
    graphVis.zoomFit(); //布局结束后居中显示
});