logo

G6

  • Docs
  • API
  • Playground
  • Community
  • Productsantv logo arrow
  • 5.0.47
  • 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
      • Build-in Node
        • Common Node Configurations
        • Diamond
        • Donut
        • Ellipse
        • Hexagon
        • Html
        • Image
        • Rect
        • Star
        • Triangle
        • Circle
      • Custom Node
      • Define Nodes with React
    • Edge
      • Edge Overview
      • Build-in Edge
        • Common Edge Configurations
        • Cubic Bezier Curve
        • CubicHorizontal Bezier Curve
        • CubicVertical Bezier Curve
        • Line
        • Polyline
        • Quadratic Bezier Curve
      • Custom Edge
    • Combo
      • Combo Overview
      • Build-in Combo
        • Circle
        • Combo Configuration Options
        • Rect
      • Custom Combo
    • Shape
      • Shape and KeyShape
      • Atomic Shapes and Their Properties
      • Design and Implementation of Composite Shape
  • Layout
    • Layout Overview
    • Build-in Layout
      • 3D Force-Directed Layout
      • AntvDagre Layout
      • Circular Layout
      • ComboCombined Layout
      • Common Layout Configuration Options
      • CompactBox
      • Concentric Layout
      • D3 Force-Directed Layout
      • Dagre Layout
      • Dendrogram Layout
      • Fishbone Layout
      • Force Force-directed Layout
      • ForceAtlas2 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
    • Build-in Behavior
      • AutoAdaptLabel
      • BrushSelect
      • ClickSelect
      • CollapseExpand
      • CreateEdge
      • DragCanvas
      • DragElement
      • DragElementForce
      • FixElementSize
      • FocusElement
      • HoverActivate
      • LassoSelect
      • OptimizeViewportTransform
      • ScrollCanvas
      • ZoomCanvas
    • Custom Behavior
  • Plugin
    • Plugin Overview
    • Build-in Plugin
      • Background
      • BubbleSets
      • Contextmenu
      • EdgeBundling
      • EdgeFilterLens
      • Fisheye
      • Fullscreen
      • GridLine
      • History
      • Hull
      • Legend
      • Minimap
      • Snapline
      • Timebar
      • Toolbar
      • Tooltip
      • Watermark
    • Custom Plugin
  • Transform
    • Data Transformation Overview
    • Build-in Transform
      • 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

Force Force-directed Layout

Previous
Fishbone Layout
Next
ForceAtlas2 Force-directed Layout

Resources

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

Loading...

Options

centripetalOptions

CentripetalOptions

Centripetal force configuration, including the center and strength for leaf nodes, isolated nodes, and other nodes.

clustering

boolean Default: false

Whether to cluster all nodes.

If true, the field specified by nodeClusterBy in node data will be used for clustering. centripetalOptions.single, centripetalOptions.leaf, and centripetalOptions.others will use the value returned by getClusterNodeStrength; leaf and centripetalOptions.center will use the average center of all nodes in the current cluster.

clusterNodeStrength

number | ((node: Node) => number) Default: 20

Used with clustering and nodeClusterBy to specify the strength of the cluster centripetal force.

collideStrength

number Default: 1

Strength of anti-overlap force, range [0, 1].

coulombDisScale

number Default: 0.005

Coulomb coefficient, a factor for repulsion. The larger the value, the greater the repulsion between nodes.

damping

number Default: 0.9

Damping coefficient, range [0, 1]. The larger the value, the slower the speed decreases.

edgeStrength

number | ((d?: Edge) => number) Default: 50

Strength of edge force (attraction).

factor

number Default: 1

Repulsion coefficient. The larger the value, the greater the repulsion.

getCenter

(node?: Node, degree?: number) => number[]

Callback for the x, y, and strength of the centripetal force for each node. If not specified, no extra centripetal force is applied.

getMass

(node?: Node) => number

Callback for the mass of each node. The parameter is the node's internal data, and the return value is the mass.

gravity

number Default: 10

Strength of the central force, i.e., the force attracting all nodes to the center. The larger the value, the more compact the layout.

height

number

Layout height, defaults to canvas height.

interval

number Default: 0.02

Controls the movement speed of each node per iteration.

leafCluster

boolean Default: false

Whether to cluster leaf nodes.

If true, centripetalOptions.single will be 100; centripetalOptions.leaf will use the value returned by getClusterNodeStrength; getClusterNodeStrength.center will return the average center of all leaf nodes.

linkDistance

number | ((edge?: Edge, source?: any, target?: any) => number) Default: 200

Edge length.

  • number: fixed length
  • ((edge?: Edge, source?: any, target?: any) => number): returns length based on edge info

maxSpeed

number Default: 200

Maximum movement length per iteration.

monitor

(params: { energy: number; nodes: Node[]; edges: Edge[]; iterations: number; }) => void

Callback for monitoring each iteration. energy indicates the convergence energy of the layout. May incur extra computation if configured; if not configured, no computation is performed.

nodeClusterBy

string

Specifies the field name in node data for clustering. Takes effect when clustering is true. Automatically generates centripetalOptions, can be used with clusterNodeStrength.

nodeSize

Size | ((d?: Node) => Size)

Node size (diameter). Used for collision detection to prevent node overlap.

nodeSpacing

number | ((d?: Node) => number)

Takes effect when preventOverlap is true. Minimum spacing between node edges to prevent overlap. Can be a callback to set different spacing for different nodes.

nodeStrength

number | ((d?: Node) => number) Default: 1000

Node force. Positive means attraction, negative means repulsion.

onTick

(data: LayoutMapping) => void

Callback for each iteration.

preventOverlap

boolean Default: true

Whether to prevent overlap. Must be used with nodeSize or data.size in node data. Only when data.size is set in the data or nodeSize is configured in the layout with the same value as the node size in the graph, collision detection for node overlap can be performed.

width

number

Layout width, defaults to canvas width.