logo

G6

  • Docs
  • API
  • Playground
  • Community
  • Productsantv logo arrow
  • 5.1.1
  • Introduction
  • Data
  • Getting Started
    • Quick Start
    • Installation
    • Integration
      • react
      • vue
      • angular
    • Step-by-step guide
  • Graph
    • Extensions En
    • Graph
    • Options
    • extension
  • Element
    • Element Overview
    • Element State
    • Node
      • Node Overview
      • Common Node Configuration
      • Circle Node
      • Diamond Node
      • Donut Node
      • Ellipse Node
      • Hexagon Node
      • HTML Node
      • Image Node
      • Rect Node
      • Star Node
      • Triangle Node
      • Custom Node
      • Define Nodes with React
      • Define Nodes with Vue
    • Edge
      • Edge Overview
      • Edge Common Configuration
      • Cubic Bezier Curve Edge
      • CubicHorizontal Bezier Curve Edge
      • CubicVertical Bezier Curve Edge
      • Line Edge
      • Polyline Edge
      • Quadratic Bezier Curve Edge
      • Custom Edge
    • Combo
      • Combo Overview
      • Combo Common Options
      • Circle Combo
      • Rect Combo
      • Custom Combo
    • Shape
      • Shape and KeyShape
      • Atomic Shapes and Their Properties
      • Design and Implementation of Composite Shape
  • Layout
    • Layout Overview
    • Common Layout Configuration Options
    • AntvDagre Layout
    • Circular Layout
    • ComboCombined Layout
    • CompactBox Layout
    • Concentric Layout
    • 3D Force-Directed Layout
    • D3 Force-Directed Layout
    • Dagre Layout
    • Dendrogram Layout
    • Fishbone Layout
    • ForceAtlas2 Force-directed Layout
    • Force-directed Layout
    • Fruchterman Force-directed Layout
    • Grid Layout
    • Indented Tree
    • MDS High-dimensional Data Dimensionality Reduction Layout
    • Mindmap Tree
    • Radial Layout
    • Random Layout
    • Snake Layout
    • Custom Layout
  • Behavior
    • Behavior Overview
    • ZoomCanvas
    • AutoAdaptLabel
    • BrushSelect
    • ClickSelect
    • CollapseExpand
    • CreateEdge
    • DragCanvas
    • DragElement
    • DragElementForce
    • FixElementSize
    • FocusElement
    • HoverActivate
    • LassoSelect
    • OptimizeViewportTransform
    • ScrollCanvas
    • Custom Behavior
  • Plugin
    • Plugin Overview
    • Background
    • BubbleSets
    • Contextmenu
    • EdgeBundling
    • EdgeFilterLens
    • Fisheye
    • Fullscreen
    • GridLine
    • History
    • Hull
    • Legend
    • Minimap
    • Snapline
    • Timebar
    • Title
    • Toolbar
    • Tooltip
    • Watermark
    • Custom Plugin
  • Transform
    • Data Transformation Overview
    • MapNodeSize
    • PlaceRadialLabels
    • ProcessParallelEdges
    • Custom Transform
  • Theme
    • Theme Overview
    • Custom Theme
    • Palette
    • Custom Palette
  • Animation
    • Animation Overview
    • Custom Animation
  • Further Reading
    • Event
    • renderer
    • coordinate
    • download-image
    • Using Iconfont
    • Use 3D
    • Bundle Project
  • What's new
    • Feature
    • Upgrade To 5.0
    • Upgrade from 5.0 to 5.1 (Layout)
  • FAQ
  • contribute

Upgrade from 5.0 to 5.1 (Layout)

Previous
Upgrade To 5.0
Next
FAQ

Resource

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library
WeaveFox-AI Coding Assistant

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference
weavefoxWeaveFox-AI Developer Community

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-Interactive solution
weavefoxWeaveFox-AI Coding Assistant
© Copyright 2026 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

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.

What Changed

  • Since 5.1, layout docs prioritize shared @antv/layout fields such as width, height, center, enableWorker, node, and edge
  • Individual layout pages mainly keep the recommended 5.1 writeup
  • If you are migrating an existing 5.0 project, use this page to map old field names to the new documentation style

D3Force: center force to shortcut fields

In 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 centerX
  • center.y maps to centerY
  • center.strength maps to centerStrength

For the full field description, see D3Force Layout.

ComboCombined: innerLayout / outerLayout to 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 },
},
}
  • When comboId has a value, it refers to the layout inside a combo
  • When comboId is empty, it refers to the outermost layout
  • Multiple layout choices are unified under the layout entry

For the 5.1 recommended form, see ComboCombined Layout.

Migration Suggestion

  1. Identify the matching layout type from your existing 5.0 project
  2. Map the old fields to the recommended 5.1 documentation style
  3. Return to the specific layout page to verify shared fields and defaults