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

Circular Layout

Previous
AntvDagre Layout
Next
ComboCombined Layout

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

Loading...

Overview

Circular layout arranges nodes evenly or at intervals on a circle, and also supports spiral layouts by configuring different startRadius and endRadius. See more circular layout examples or source code.

Usage Scenarios

Circular layout:

  • Suitable for networks with equal relationships and no hierarchical structure

Spiral layout:

  • Suitable for implicit hierarchies or time series graphs (such as organizational charts, propagation networks)

Basic Usage

Other settings use the default configuration (layout width and height default to the entire canvas container)

const graph = new Graph({
// other configurations
layout: {
type: 'circular',
},
});

Options

PropertyDescriptionTypeDefaultRequired
typeLayout typecircular-✓
angleRatioHow many 2*PI between the first and last nodenumber1
centerCenter of the layout[number, number]|[number, number, number][layout width / 2, layout height / 2]
clockwiseWhether to arrange clockwisebooleantrue
divisionsNumber of segments on the ring (segments will be evenly distributed, effective when endRadius - startRadius != 0)number1
nodeSizeNode size (diameter), used for collision detectionSize | ((nodeData: Node) => Size)10
nodeSpacingMinimum spacing between rings, used to adjust radiusnumber | ((nodeData: Node) => number)10
orderingNode ordering on the ring, see detailstopology | topology-directed | degree-
radiusCircle radius, if set, spiral layout configs startRadius and endRadius are ignored, see detailsnumber-
startAngleStart angle of the layoutnumber0
endAngleEnd angle of the layoutnumber2 * Math.PI
startRadiusStart radius for spiral layout, usagenumber-
endRadiusEnd radius for spiral layoutnumber-
widthLayout widthnumbercanvas width
heightLayout heightnumbercanvas height

ordering

Node ordering on the ring

  • topology: topological order
  • topology-directed: topological order (directed graph)
  • degree: order by degree

If not set (null), the order in the array is used directly

radius

If radius, startRadius, and endRadius are not set, the default is Math.min(layout width, layout height) / 2, i.e., fills the entire layout area

Code Examples

Basic Circular Layout

const graph = new Graph({
// other configurations
layout: {
type: 'circular',
},
});

import { Graph } from '@antv/g6';
fetch('https://assets.antv.antgroup.com/g6/circular.json')
.then((res) => res.json())
.then((data) => {
const graph = new Graph({
container: 'container',
autoFit: 'view',
data,
node: {
style: {
labelText: (d) => d.id,
labelFill: '#fff',
labelPlacement: 'center',
},
},
layout: {
type: 'circular',
},
behaviors: ['drag-canvas', 'drag-element'],
});
graph.render();
});

Spiral Layout

const graph = new Graph({
// other configurations
layout: {
type: 'circular',
startRadius: 10,
endRadius: 300,
},
});

import { Graph } from '@antv/g6';
fetch('https://assets.antv.antgroup.com/g6/circular.json')
.then((res) => res.json())
.then((data) => {
const graph = new Graph({
container: 'container',
autoFit: 'center',
data,
node: {
style: {
labelText: (d) => d.id,
labelFill: '#fff',
labelPlacement: 'center',
},
},
layout: {
type: 'circular',
startRadius: 10,
endRadius: 300,
},
behaviors: ['drag-canvas', 'drag-element'],
});
graph.render();
});