Layout

<Graphin/> 组件 props.layout 配置。用于配置 Graphin 的布局。

属性类型是否必选说明
namestring布局名称
optionsLayoutOptions用户自定义布局配置

LayoutOptions

根据 Layout 的不同,每个 Layout 有自己的配置。如果是 layout.name 是自定义布局,LayoutOptions 也包括自定义布局的配置。

CircleOptions

圆形布局配置

属性类型默认值说明
xnumber画布宽度 / 2圆心 x 坐标
ynumber画布高度 / 2圆心 y 坐标
rnumber节点数量 * 10圆的半径
scalenumber0.8缩放比率

ConcentricOptions

同心圆布局配置

属性类型默认值说明
boundingBox{ x1: number; y1:number; w:number; y:number; }{x:0,y:0,w:画布宽度,h:画布高度}同心圆的布局范围,默认为当前画布的宽高范围
minNodeSpacingnumber60节点间的距离
levelWidth(nodes: Data['nodes'], maxDegree: number) => number见下方每层的节点度数范围

LevelWidth 默认值:

  1. const LevelWidth = (nodes: Data['nodes'], maxDegree: number) => {
  2. /** 同心圆层数 */
  3. const levelNum = 8;
  4. return maxDegree / levelNum;
  5. };

GridLOptions

横纵布局配置

属性类型默认值说明
widthnumber画布宽度布局范围的宽度
heightnumber画布高度布局范围的高度
nodeSepnumber100节点间的间距,上下左右均是一致的
nodeSizenumber50节点的大小,单位 px

RadialOptions

径向布局配置

属性类型默认值说明
center[number,number][画布宽度/2,画布高度/2]中心点坐标
preventOverlapbooleantrue是否防止覆盖
nodeSizenumber100节点大小
unitRadiusnumber150每层的半径

DagreOptions

有向分层布局配置

属性类型默认值说明
center[number,number][画布宽度 / 2, 画布高度 / 2]中心点坐标
nodeSizenumber画布高度节点大小
nodesepnumber12节点水平间距,单位 px
ranksepnumber50每一层节点之间间距
alignstringUL放置位置,枚举值见G6 文档

ForceOptions

力导布局配置

属性类型默认值说明
presetLayout{ name: 'random'undefinedoptions:{}}前置布局,主要用于布局切换。当前置布局为 force 时,内部启动 tweak 布局算法
stiffnessnumber200弹簧劲度系数
defSpringLennumber200默认的弹簧长度
repulsionnumber200.0 * 5斥力,这里指代 库伦常量 Ke
dampingnumber0.9速度的减震因子,其实就是阻尼系数
minEnergyThresholdnumber0.1最小能量阈值,粒子运动,有阻尼系数的存在,最终能量会消耗殆尽
maxSpeednumber1000最大的速度,范围区间 [0,1000]
MaxIterationsnumber10000001000000 次/(1000/60) = 60000 s = 1 min
animationboleantrue是否开启动画

力导里的小细节:

  • edge.data.spring 可以指定设置边的弹簧长度
  • node.layout.force.mass 可以设置力导节点的质量