Upgrade from 5.0 to 5.1 (Layout)
Previous
Upgrade To 5.0
Next
FAQ
Loading...
This page focuses on layout documentation changes introduced in G6 5.1. Starting from 5.1, layout pages prioritize the field naming aligned with @antv/layout; common 5.0 layout writeups are collected here for migration reference.
5.1, layout docs prioritize shared @antv/layout fields such as width, height, center, enableWorker, node, and edge5.1 writeup5.0 project, use this page to map old field names to the new documentation styleIn 5.0 documentation, the center force was commonly written inside center:
{layout: {type: 'd3-force',center: {x: 250,y: 150,strength: 0.8,},},}
In 5.1 documentation, the recommended form is the shortcut fields:
{layout: {type: 'd3-force',centerX: 250,centerY: 150,centerStrength: 0.8,},}
center.x maps to centerXcenter.y maps to centerYcenter.strength maps to centerStrengthFor the full field description, see D3Force Layout.
In 5.0 documentation, the inner combo layout and the outer layout were commonly configured separately:
import { ConcentricLayout, ForceLayout } from '@antv/layout';{layout: {type: 'combo-combined',innerLayout: new ConcentricLayout({sortBy: 'id',}),outerLayout: new ForceLayout({gravity: 1,}),},}
In 5.1 documentation, the recommended form is a single layout entry that returns different configurations for different levels based on comboId:
{layout: {type: 'combo-combined',layout: (comboId) =>comboId? { type: 'concentric', sortBy: 'id' }: { type: 'force', gravity: 1 },},}
comboId has a value, it refers to the layout inside a combocomboId is empty, it refers to the outermost layoutlayout entryFor the 5.1 recommended form, see ComboCombined Layout.
5.0 project5.1 documentation style