配置指南

布局配置

内置布局类型、选型建议、常用参数与 Worker 支持

通过 layout 配置布局。多数算法基于 @antv/layout,选项会透传到底层算法。

layout: { type: 'force', linkDistance: 100 }

所有官方布局都可以直接通过 type 使用。G6Lite 会在内部按需加载对应算法,不需要额外导入或调用启用函数。

布局选型

目标推荐布局说明
快速展示无层级关系circular / grid / random稳定、可预期、成本低
网络关系探索force / d3-force / force-atlas2 / fruchterman大图需关注耗时,可启用 worker
层级 DAGdagre适合流程、依赖和调用链
树与组织结构mindmap / indented / fishbone适合业务结构图
大规模首屏预计算坐标或轻量布局避免把首屏瓶颈放在布局计算

支持的布局类型

type说明常用参数
force力导向linkDistance, nodeStrength
d3-forceD3 力导向linkDistance, charge
force-atlas2ForceAtlas2 力导向kr, kg
fruchtermanFruchterman 力导向gravity, speed
circular环形radius, center
concentric同心圆center, minNodeSpacing
radial辐射center, unitRadius
grid网格rows, cols
dagre有向无环图 / 层级rankdir, nodesep, ranksep
mds多维标度linkDistance
random随机center
mindmap脑图direction, hGap, vGap
indented缩进树indent, rowHeight
fishbone鱼骨图direction

效果预览

forcecircularradial
force 布局circular 布局radial 布局
dagregridmindmap
dagre 布局grid 布局mindmap 布局

示例

layout: { type: 'circular', radius: 150 }
layout: { type: 'dagre', rankdir: 'TB', nodesep: 40, ranksep: 60 }
layout: { type: 'force', linkDistance: 100, worker: true }

Worker

layout.worker: true 会将布局计算放到 Web Worker 中,避免阻塞主线程。G6Lite 会对大图的 force 系布局自动启用 worker。

mindmap、indented、fishbone 是 O(V+E) 的内置函数式树布局,始终在主线程执行;即使配置 worker: true 也不会退化为其他布局。

layout: {
  type: 'force',
  worker: true,
}

运行时重新布局

graph.setLayout({ type: 'grid', cols: 6 });
await graph.layout();

不传 layout 时,G6Lite 会使用节点自带的 x / y,缺省为 0。

相关