logo

G6

  • Docs
  • API
  • Playground
  • Community
  • Productsantv logo arrow
  • 5.0.45
  • 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 Overview
      • Shape Properties
  • Layout
    • Layout Overview
    • Build-in Layout
      • AntvDagre
      • Circular
      • ComboCombined
      • Common Layout Configuration Options
      • CompactBox
      • Concentric
      • D3Force
      • D3Force3D
      • Dagre
      • Dendrogram
      • Fishbone
      • Force
      • ForceAtlas2
      • Fruchterman
      • Grid Layout
      • Indented
      • Mds
      • Mindmap
      • Radial
      • Random
      • Snake
    • 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

Previous
Fishbone
Next
ForceAtlas2

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 configuration, including the centripetal center of leaf nodes, discrete points, and the centripetal center of other nodes

clustering

boolean Default: false

Whether to cluster all nodes

If it is true, the node data configured by nodeClusterBy will be used as the clustering basis. centripetalOptions.single, centripetalOptions.leaf, centripetalOptions.others will use the return value of getClusterNodeStrength; leaf、centripetalOptions.center will use the average center of all nodes in the current cluster

clusterNodeStrength

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

Use it with clustering and nodeClusterBy to specify the size of the centripetal force of the cluster

collideStrength

number Default: 1

The strength of the force that prevents overlap, range [0, 1]

coulombDisScale

number Default: 0.005

Coulomb's coefficient, a coefficient of repulsion, the larger the number, the larger the repulsion between nodes

damping

number Default: 0.9

Damping coefficient, the range of the value is [0, 1]. The larger the number, the slower the speed will decrease

edgeStrength

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

The size of the force of the edge (attraction)

factor

number Default: 1

The repulsion coefficient, the larger the number, the larger the repulsion

getCenter

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

The callback function for the center force of each node, if not specified, there will be no additional center force

getMass

(node?: Node__) => number

The callback function for the mass of each node, if the parameter is the internal circulation data of the node, the return value is the size of the mass

gravity

number Default: 10

The size of the center force, which attracts all nodes to the center. The larger the number, the more compact the layout

height

number

The height of the layout, default to the height of the canvas

interval

number Default: 0.02

Control the movement speed of each iteration node

leafCluster

boolean Default: false

Whether to cluster leaf nodes

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

linkDistance

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

边的长度

  • number: 固定长度

  • ((edge?: Edge, source?: any, target?: any) => number): 根据边的信息返回长度 The length of the edge

  • number: fixed length

  • ((edge?: Edge, source?: any, target?: any) => number): return length according to the edge information

maxSpeed

number Default: 200

The maximum movement length of one iteration

monitor

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

The callback function for monitoring information of each iteration, energy indicates the convergence energy of the layout. If not configured, it will not calculate

nodeClusterBy

string

Specify the field name of the node data as the clustering basis for the node, and it takes effect when clustering is true. You can combine it with clusterNodeStrength to use it

nodeSize

Size | ((d?: Node__) => Size__)

The size of the node (diameter). Used for collision detection when preventing node overlap

nodeSpacing

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

It is effective when preventOverlap is true. The minimum spacing of the node edge when preventing overlap. It can be a callback function to set different minimum spacing for different nodes

nodeStrength

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

The force of the node, positive numbers represent the attraction force between nodes, and negative numbers represent the repulsion force between nodes

onTick

(data: LayoutMapping__) => void

The callback function for each iteration

preventOverlap

boolean Default: true

Whether to prevent overlap, must be used with the following properties nodeSize or data.size in the node data, and only when the data.size is set in the data or the nodeSize value is configured with the same value as the current graph node size in the layout configuration, can the node overlap collision detection be performed

width

number

The width of the layout, default to the width of the canvas