logo

G6

  • Docs
  • API
  • Playground
  • Community
  • Productsantv logo arrow
  • 5.0.49
  • 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
    • 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
    • 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
  • FAQ
  • contribute

Concentric Layout

Previous
CompactBox Layout
Next
3D Force-Directed Layout

Resource

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

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

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
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

Overview

The concentric layout arranges nodes in layers according to a certain sorting rule, with each layer of nodes placed around a common center. See more concentric layout examples or source code.

Usage Scenarios

  • Layered data visualization, such as permission structures, organizational charts, etc., with the center as the top-level role and outer rings as lower-level nodes.
  • Visualization of ranking analysis results, with high-importance nodes in the center and low-importance nodes on the periphery, quickly expressing the relative influence of nodes in the graph.

Options

PropertyDescriptionTypeDefaultRequired
typeLayout typeconcentric-✓
centerCenter position of the circular layout, defaults to the center of the container[number, number] | [number, number, number]-
clockwiseWhether to arrange nodes clockwisebooleanfalse
equidistantWhether the distance between rings is equalbooleanfalse
widthLayout width, defaults to container widthnumber-
heightLayout height, defaults to container heightnumber-
sortByThe property to sort by (node attribute name). The higher the value, the closer to the center. If set to 'degree', nodes with higher degree are placed closer to the centerstringdegree
maxLevelDiffMaximum attribute difference in the same layer. If undefined, set to maxValue / 4, where maxValue is the maximum value of the sorting propertynumberundefined
nodeSizeNode size (diameter), used for collision detectionnumber | number[] | ((nodeData: Node) => number)30
nodeSpacingMinimum spacing between rings, used to adjust the radiusnumber | number[] | ((node?: Node) => number)10
preventOverlapWhether to prevent overlap. Must be used with nodeSize or data.size. Only works if node size is set in data or in this layout config.booleanfalse
startAngleThe angle (in radians) to start laying out nodesnumber3 / 2 * Math.PI
sweepThe angle difference between the first and last node in the same layer. If undefined, set to 2 Math.PI (1 - 1 / level.nodes )numberundefined

Example Code

import { Graph } from '@antv/g6';
const graph = new Graph({
container: 'container',
width: 500,
height: 250,
autoFit: 'view',
data: {
nodes: [
{ id: 'center', data: { label: 'Center', level: 0 } },
{ id: 'level1-0', data: { label: 'L1-0', level: 1 } },
{ id: 'level1-1', data: { label: 'L1-1', level: 1 } },
{ id: 'level1-2', data: { label: 'L1-2', level: 1 } },
{ id: 'level1-3', data: { label: 'L1-3', level: 1 } },
{ id: 'level1-4', data: { label: 'L1-4', level: 1 } },
{ id: 'level1-5', data: { label: 'L1-5', level: 1 } },
{ id: 'level2-0', data: { label: 'L2-0', level: 2 } },
{ id: 'level2-1', data: { label: 'L2-1', level: 2 } },
{ id: 'level2-2', data: { label: 'L2-2', level: 2 } },
{ id: 'level2-3', data: { label: 'L2-3', level: 2 } },
{ id: 'level2-4', data: { label: 'L2-4', level: 2 } },
{ id: 'level2-5', data: { label: 'L2-5', level: 2 } },
{ id: 'level2-6', data: { label: 'L2-6', level: 2 } },
{ id: 'level2-7', data: { label: 'L2-7', level: 2 } },
{ id: 'level2-8', data: { label: 'L2-8', level: 2 } },
{ id: 'level2-9', data: { label: 'L2-9', level: 2 } },
{ id: 'level2-10', data: { label: 'L2-10', level: 2 } },
{ id: 'level2-11', data: { label: 'L2-11', level: 2 } },
],
edges: [
{ id: 'e-center-level1-0', source: 'center', target: 'level1-0' },
{ id: 'e-center-level1-1', source: 'center', target: 'level1-1' },
{ id: 'e-center-level1-2', source: 'center', target: 'level1-2' },
{ id: 'e-center-level1-3', source: 'center', target: 'level1-3' },
{ id: 'e-center-level1-4', source: 'center', target: 'level1-4' },
{ id: 'e-center-level1-5', source: 'center', target: 'level1-5' },
{ id: 'e-level1-0-level2-0', source: 'level1-0', target: 'level2-0' },
{ id: 'e-level1-0-level2-1', source: 'level1-0', target: 'level2-1' },
{ id: 'e-level1-1-level2-2', source: 'level1-1', target: 'level2-2' },
{ id: 'e-level1-1-level2-3', source: 'level1-1', target: 'level2-3' },
{ id: 'e-level1-2-level2-4', source: 'level1-2', target: 'level2-4' },
{ id: 'e-level1-2-level2-5', source: 'level1-2', target: 'level2-5' },
{ id: 'e-level1-3-level2-6', source: 'level1-3', target: 'level2-6' },
{ id: 'e-level1-3-level2-7', source: 'level1-3', target: 'level2-7' },
{ id: 'e-level1-4-level2-8', source: 'level1-4', target: 'level2-8' },
{ id: 'e-level1-4-level2-9', source: 'level1-4', target: 'level2-9' },
{ id: 'e-level1-5-level2-10', source: 'level1-5', target: 'level2-10' },
{ id: 'e-level1-5-level2-11', source: 'level1-5', target: 'level2-11' },
],
},
layout: {
type: 'concentric',
nodeSize: 32,
sortBy: 'degree',
preventOverlap: true,
},
behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
animation: false,
});
graph.render();