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

Fruchterman Force-directed Layout

Previous
Force-directed Layout
Next
Grid 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 Fruchterman layout is a force-directed layout based on the algorithm from Graph Drawing by Force-directed Placement. By flexibly configuring parameters to simulate physical forces, the layout automatically reaches a stable equilibrium state with minimal energy. It supports both basic uniform distribution and cluster layouts. See more Fruchterman force-directed layout examples and source code.

Use Cases

  • Basic uniform distribution: Suitable for displaying network graphs with evenly distributed nodes and clear overall structure, such as network topology and knowledge graphs.
  • Cluster layout: Suitable for visualizing data with internal aggregation or grouping, such as community structure display and association group analysis.

Options

PropertyDescriptionTypeDefaultRequired
typeLayout type'fruchterman'-✓
heightLayout heightnumbercontainer height
widthLayout widthnumbercontainer width
gravityCentral force, i.e., the force attracting all nodes to the center. The larger the value, the more compact the layoutnumber10
speedNode movement speed per iteration. Too high a speed may cause strong oscillationnumber5
onTickCallback for each iteration(data: LayoutMapping) => void-

Cluster Layout

PropertyDescriptionTypeDefaultRequired
clusteringWhether to use cluster layoutbooleanfalse
nodeClusterByField name in node data for clustering, effective when clustering is truestring'cluster'
clusterGravityGravity within clusters, affects cluster compactness, effective when clustering is truenumber10

Example Code

Basic Layout

import { Graph } from '@antv/g6';
const graph = new Graph({
container: 'container',
width: 500,
height: 250,
data: {
nodes: [
{ id: '0' },
{ id: '1' },
{ id: '2' },
{ id: '3' },
{ id: '4' },
{ id: '5' },
{ id: '6' },
{ id: '7' },
{ id: '8' },
{ id: '9' },
{ id: '10' },
],
edges: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '0', target: '3' },
{ source: '0', target: '4' },
{ source: '0', target: '7' },
{ source: '0', target: '8' },
{ source: '0', target: '9' },
{ source: '0', target: '10' },
{ source: '2', target: '3' },
{ source: '4', target: '5' },
{ source: '4', target: '6' },
{ source: '5', target: '6' },
{ source: '9', target: '10' },
],
},
node: {
style: {
labelFill: '#fff',
labelPlacement: 'center',
labelText: (d) => d.id,
},
},
layout: {
type: 'fruchterman',
gravity: 5,
speed: 5,
},
behaviors: ['drag-canvas', 'drag-element'],
});
graph.render();
Show full code
import { Graph } from '@antv/g6';
const data = {
nodes: [
{ id: '0' },
{ id: '1' },
{ id: '2' },
{ id: '3' },
{ id: '4' },
{ id: '5' },
{ id: '6' },
{ id: '7' },
{ id: '8' },
{ id: '9' },
{ id: '10' },
],
edges: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '0', target: '3' },
{ source: '0', target: '4' },
{ source: '0', target: '7' },
{ source: '0', target: '8' },
{ source: '0', target: '9' },
{ source: '0', target: '10' },
{ source: '2', target: '3' },
{ source: '4', target: '5' },
{ source: '4', target: '6' },
{ source: '5', target: '6' },
{ source: '9', target: '10' },
],
};
const graph = new Graph({
container: 'container',
data,
node: {
style: {
labelFill: '#fff',
labelPlacement: 'center',
labelText: (d) => d.id,
},
},
layout: {
type: 'fruchterman',
gravity: 5,
speed: 5,
},
behaviors: ['drag-canvas', 'drag-element'],
});
graph.render();

Cluster Layout

import { Graph } from '@antv/g6';
const graph = new Graph({
container: 'container',
width: 500,
height: 250,
data: {
nodes: [
{ id: '0', data: { cluster: 'a' } },
{ id: '1', data: { cluster: 'a' } },
{ id: '2', data: { cluster: 'a' } },
{ id: '3', data: { cluster: 'a' } },
{ id: '4', data: { cluster: 'a' } },
{ id: '5', data: { cluster: 'b' } },
{ id: '6', data: { cluster: 'b' } },
{ id: '7', data: { cluster: 'b' } },
{ id: '8', data: { cluster: 'c' } },
{ id: '9', data: { cluster: 'c' } },
{ id: '10', data: { cluster: 'c' } },
],
edges: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '0', target: '4' },
{ source: '0', target: '6' },
{ source: '2', target: '3' },
{ source: '2', target: '4' },
{ source: '3', target: '4' },
{ source: '5', target: '6' },
{ source: '6', target: '7' },
{ source: '7', target: '8' },
{ source: '8', target: '9' },
{ source: '8', target: '10' },
],
},
node: {
style: {
labelFill: '#fff',
labelPlacement: 'center',
labelText: (d) => `${d.data.cluster}-${d.id}`,
},
palette: {
type: 'group',
field: 'cluster',
},
},
edge: {
style: {
endArrow: true,
},
},
layout: {
type: 'fruchterman',
gravity: 6,
speed: 5,
// Cluster layout parameters
clustering: true,
nodeClusterBy: 'cluster',
clusterGravity: 3,
},
behaviors: ['drag-canvas', 'drag-element'],
});
graph.render();
Show full code
import { Graph } from '@antv/g6';
const data = {
nodes: [
{ id: '0', data: { cluster: 'a' } },
{ id: '1', data: { cluster: 'a' } },
{ id: '2', data: { cluster: 'a' } },
{ id: '3', data: { cluster: 'a' } },
{ id: '4', data: { cluster: 'a' } },
{ id: '5', data: { cluster: 'b' } },
{ id: '6', data: { cluster: 'b' } },
{ id: '7', data: { cluster: 'b' } },
{ id: '8', data: { cluster: 'c' } },
{ id: '9', data: { cluster: 'c' } },
{ id: '10', data: { cluster: 'c' } },
],
edges: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '0', target: '4' },
{ source: '0', target: '6' },
{ source: '2', target: '3' },
{ source: '2', target: '4' },
{ source: '3', target: '4' },
{ source: '5', target: '6' },
{ source: '6', target: '7' },
{ source: '7', target: '8' },
{ source: '8', target: '9' },
{ source: '8', target: '10' },
],
};
const graph = new Graph({
container: 'container',
data,
node: {
style: {
labelFill: '#fff',
labelPlacement: 'center',
labelText: (d) => `${d.data.cluster}-${d.id}`,
},
palette: {
type: 'group',
field: 'cluster',
},
},
edge: {
style: {
endArrow: true,
},
},
layout: {
type: 'fruchterman',
gravity: 6,
speed: 5,
// Cluster layout parameters
clustering: true,
nodeClusterBy: 'cluster',
clusterGravity: 3,
},
behaviors: ['drag-canvas', 'drag-element'],
});
graph.render();