vis-network layout(布局)
充当canvas上的摄像机,进行动画、缩放和对焦。
布局的配置项必须包含在名为“layout”的对象中。
注意
警告:当启用层次布局时,该布局会覆盖一些其它配置项。 物理模拟被设置为层排斥、动态光滑边缘转换为静态光滑边缘。
# 完整配置项预览
var options = {
layout: {
randomSeed: undefined,
improvedLayout: true,
clusterThreshold: 150,
hierarchical: {
enabled: false,
levelSeparation: 150,
nodeSpacing: 100,
treeSpacing: 200,
blockShifting: true,
edgeMinimization: true,
parentCentralization: true,
direction: 'UD', // UD, DU, LR, RL
sortMethod: 'hubsize', // hubsize, directed
shakeTowards: 'leaves' // roots, leaves
}
}
}
network.setOptions(options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 配置项详情
名字 | 类型 | 默认 | 说明 |
---|---|---|---|
randomSeed | Number | undefined | 当不使用层次布局时,初始渲染时节点位置是随机的。这意味着每次渲染得到的布局均不相同。 如果该配置项的值为一个确定的布局‘’种子''时,那么每次渲染后得到的布局都将相同(都为这个‘’种子‘’)。 可以使用network实例的 getseed() 方法获取这个布局‘’种子‘’。 |
improvedLayout | Boolean | true | 为true ,关系图将使用‘’Kamada Kawai‘’算法进行初始布局渲染。对于大于100个节点的关系图,将自动执行‘’集群‘’以减少初次渲染的节点数量。提高渲染性能减少稳定时间。如果关系图节点或边连接十分紧密(没有或只有几个叶节点),这种方式可能不起作用,关系图将使用旧方法渲染。 |
clusterThreshold | Number | 150 | improvedLayout 阈值。''集群''阈值。 |
hierarchical | Object or Boolean | Object | 如果为true ,布局引擎将使用默认设置以分层方式放置节点(层次布局)。可提供 hierarchical 对象以自定义。 |
hierarchical. enabled | Boolean | false | 为true 则为层次布局。如果为undefined ,但定义了hierarchical 对象中的任何属性,则将其设置为true 。 |
hierarchical. levelSeparation | Number | 150 | 不同层之间的距离 |
hierarchical. nodeSpacing | Number | 100 | 节点之间的最小距离。这仅用于初始布局。如果启用物理模拟,这里的节点距离就是有效节点距离。 |
hierarchical. treeSpacing | Number | 200 | 不同树之间的距离(独立关系图实例)。这仅用于初始布局。如果启用物理模拟,在排斥模型中为树之间的距离。 |
hierarchical. blockShifting | Boolean | true | 减少canvas中空白的方法。 可单独使用,也可与边最小化(edgeMinimization)配合使用。 每个节点都将检查空白,并将其和其分支(子层)尽可能远地移动,并在各层级中均遵守nodeSpacing。 这主要用于初始布局。 如果启用物理模拟,则布局将由物理模拟确定。 不过,这将大大加快稳定时间! |
hierarchical. edgeMinimization | Boolean | true | 减少canvas中空白的方法。 可单独使用,也可与块移位(blockShifting)配合使用。 启用此项一般情况下会加快布局过程。 每个节点将尝试沿着自由轴移动,以减少其边的总长度。 这主要用于初始布局。 如果启用物理模拟,布局将由物理模拟决定。不过,这将大大加快稳定时间! |
hierarchical. parentCentralization | Boolean | true | 如果为true ,则布局算法完成后,父节点将再次居中。 |
hierarchical. direction | String | 'UD' | 层次结构的方向。可用选项包括: up-down , down-up , left-right , right-left 。可简写为UD ,DU ,LR ,RL 。 |
hierarchical. sortMethod | String | 'hubsize' | 指定确定节点层级的算法。可选: hubsize , directed 。hubsize 将边最多的节点放在顶部。 由此计算层次布局的其余部分。directed 根据边的“to”和“from”数据计算层级。A->B,因此B低于A的层级。 |
hierarchical. shakeTowards | String | 'roots' | 控制在directed 布局中:所有的根节点是否应该排列在顶部,它们的子节点应该尽可能靠近它们的根( roots ) 。还是所有的叶子节点排列在底部,它们的父节点应该尽可能靠近它们的子叶子节点( leaves )。 |
编辑 (opens new window)
上次更新: 2021/03/31, 14:03:00