Fruchterman Layout

Fruchterman Reingold Layout is a kind of force-directed layout in theory. The differences are the definitions of attracitve force and repulsive force.

Usage

As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. By tuning the parameters, you can adjust the iteration number, layout compactness, layout by clusters, and so on.

  • Example 1 : Basic Fruchterman layout.
  • Example 2 : Fruchterman clustering layout.
  • Example 3 : Translate the layout parameters in dynamic.
  • Example 4 : Fruchterman layout with web-worker in case layout calculation takes too long to block page interaction.
基本 Fruchterman 布局Fruchterman 聚类布局Fruchterman 布局参数动态变化Fruchterman 使用 web-worker

center

Type: Array
Example: [ 0, 0 ]
Default: The center of the graph
Required: false
Explanation: The center of the layout

maxIteration

Type: Number
Default: 1000
Required: false
Explanation: The max number of iteration

gravity

Type: Number
Default: 10
Required: false
Explanation: The gravity. higher the gravity, more compact the layout

speed

Type: Number
Default: 1
Required: false
Explanation: The speed of node movement in each iteration. Large value may cause swing.

clustering

Type: Boolean
Default: false
Required: false
Explanation: Clutering the nodes

clusterGravity

Type: Number
Default: 10
Required: false
Explanation: The gravity inside each cluster. It will take effect while clustering is true