从 5.0 升级到 5.1(布局)
上一篇
升级到 5.0
下一篇
常见问题
Loading...
本文档聚焦 G6 5.1 中布局文档的写法调整。5.1 的布局页面会优先展示与 @antv/layout 对齐后的字段;5.0 中常见的布局写法统一收敛到本文档中,便于迁移时对照。
5.1 起,布局文档会优先展示 @antv/layout 的公共字段,例如 width height center enableWorker node edge5.1 推荐写法,5.0 中常见写法请以本文档为准5.1 文档里的推荐配置5.0 文档中,常见把中心力写在 center 中:
{layout: {type: 'd3-force',center: {x: 250,y: 150,strength: 0.8,},},}
5.1 文档中推荐写成更直接的快捷字段:
{layout: {type: 'd3-force',centerX: 250,centerY: 150,centerStrength: 0.8,},}
center.x 对应 centerXcenter.y 对应 centerYcenter.strength 对应 centerStrength如果你需要继续对照完整字段说明,可查看 D3Force 布局。
5.0 文档中,常见分别配置 Combo 内部布局和最外层布局:
import { ConcentricLayout, ForceLayout } from '@antv/layout';{layout: {type: 'combo-combined',innerLayout: new ConcentricLayout({sortBy: 'id',}),outerLayout: new ForceLayout({gravity: 1,}),},}
5.1 文档中推荐使用单个 layout 字段,根据 comboId 为不同层级返回布局配置:
{layout: {type: 'combo-combined',layout: (comboId) =>comboId? { type: 'concentric', sortBy: 'id' }: { type: 'force', gravity: 1 },},}
comboId 有值时,表示当前为 Combo 内部层级comboId 为空时,表示当前为最外层布局layout 入口如果你需要查看 5.1 推荐写法,可查看 ComboCombined 布局。
5.0 字段映射成 5.1 文档里的推荐写法