布局算法类型
# 图布局类型
提示
组件库提供了多种布局算法,用于对图数据进行不同视角的呈现,辅助更清晰的分析复杂关系数据。
# 布局算法类型说明
算法类型 | 算法名称 | 使用场景说明 |
---|---|---|
fastForce | 网络布局 | 适用于不同数据量的关系数据,描述事物间关系,比如社交网络关系、计算机网络关系、资金交易关系等各类关系网络场景 |
simulation | 力导向布局 | 适用数据量较大的关系数据,能够清晰的展示图中存在的群组,便于从中观察到核心节点,关系紧密程度等信息 |
kawakai | 最优路径布局 | 适用于规模不大的但关系紧密的复杂关系数据,能够有效的分散节点空间,清晰展示关系网络结构 |
hierarchical | 层级布局 | 适应于层次分明,或者需要严密拓扑性质的场景,比如组织架构图、分层网络图、流程图等 |
concentric | 同心圆布局 | 将节点按照度数排序,节点度数大的一群点会排列在最中心,度数小的节点会分布在最外层,使其以同心圆的方式排布,适应于快速查找出度数较多的节点 |
circle | 环形布局 | 适用于查找关联关系较多的关键节点场景,例如在圆形布局的图中可以明显分辨出哪些节点关联关系较多 |
arf | 球面引力布局 | 适用于较小规模的复杂网络数据,可以在规则的圆面上清晰的展示群组划分,核心节点等信息 |
tree | 树形布局 | 适用于具有严格的树形结构的数据,例如组织架构图,流程图等 |
grid | 网格布局 | 节点按一定排序方式按网状排列,适应于分层网络,便于看清整体层次 |
dagre | 流向布局 | 适用于具有方向性的关系数据,如:流程图,资金流向等场景 |
radial | 中心径向布局 | 指定中心节点,按照节点的关系层级进行分层展示,用于分析与核心人物或者事物的关系紧密程度分布 |
avoidlap | 避免重叠 | 在节点距离紧凑或存在大量重叠时,可以通过该算法调整,避免节点重叠,使网络中节点更清晰的展示 |
# 如何使用布局?
组件库提供了统一的布局计算接口,支持同步计算和异步计算两种方式的计算。
- 同步计算接口
excuteLocalLayout(layoutType,layoutConfig,endCallback)
, 适用于数据量较小时的布局,具有动画过程,性能消耗较高。 - 异步计算接口
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(); //布局结束后居中显示
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20