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

D3Force3D

Previous
D3Force
Next
Dagre

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

alpha

number

Convergence threshold of the current iteration

alphaDecay

number

Convergence threshold of the current iteration

alphaMin

number

Convergence threshold of the current iteration

alphaTarget

number

Set the target convergence threshold of the current iteration

center

false | { x?: number; y?: number; strength?: number; }

Center force

collide

false | { radius?: number | ((node: NodeDatum__, index: number, nodes: NodeDatum__[]) => number); strength?: number; iterations?: number; }

Collision force

forceSimulation

Simulation**<**NodeDatum__, EdgeDatum__>

Custom force method, if not specified, use d3.js method

iterations

number

Number of iterations 设置的是力的迭代次数,而不是布局的迭代次数

The number of iterations of the force, not the layout

link

false | { id?: (edge: EdgeDatum__, index: number, edges: EdgeDatum__[]) => string; distance?: number | ((edge: EdgeDatum__, index: number, edges: EdgeDatum__[]) => number); strength?: number | ((edge: EdgeDatum__, index: number, edges: EdgeDatum__[]) => number); iterations?: number; }

Link force

manyBody

false | { strength?: number | ((node: NodeDatum__, index: number, nodes: NodeDatum__[]) => number); theta?: number; distanceMin?: number; distanceMax?: number; }

Many body force

nodeSize

number | ((node: NodeDatum__, index: number, nodes: NodeDatum__[]) => number) Default: 10

Node size (diameter). Used for collision detection when nodes overlap

onTick

(data: LayoutMapping__) => void

Callback executed on each tick

radial

false | { strength?: number | ((node: NodeDatum__, index: number, nodes: NodeDatum__[]) => number); radius?: number | ((node: NodeDatum__, index: number, nodes: NodeDatum__[]) => number); x?: number; y?: number; }

Radial force

randomSource

() => number

Set the function for generating random numbers

velocityDecay

number

Specify the decay factor

x

false | { strength?: number | ((node: NodeDatum__, index: number, nodes: NodeDatum__[]) => number); x?: number | ((node: NodeDatum__, index: number, nodes: NodeDatum__[]) => number); }

X axis force

y

false | { strength?: number | ((node: NodeDatum__, index: number, nodes: NodeDatum__[]) => number); y?: number | ((node: NodeDatum__, index: number, nodes: NodeDatum__[]) => number); }

Y axis force

center

false | { x?: number; y?: number; z?: number; strength?: number; }

中心力 Center force

numDimensions

number

radial

false | { strength?: number | ((node: NodeDatum__, index: number, nodes: NodeDatum__[]) => number); radius?: number | ((node: NodeDatum__, index: number, nodes: NodeDatum__[]) => number); x?: number; y?: number; z?: number; }

Radial force

z

false | { strength?: number | ((node: NodeDatum__, index: number, nodes: NodeDatum__[]) => number); z?: number | ((node: NodeDatum__, index: number, nodes: NodeDatum__[]) => number); }

Z axis force