2.0 KiB
| title | order |
|---|---|
| Fruchterman | 7 |
Fruchterman is a kind of force-directed layout. G6 implements it according to the paper Graph Drawing by Force-directed Placement.
const graph = new G6.Graph({
container: 'mountNode',
width: 1000,
height: 600,
layout: {
type: 'fruchterman',
center: [200, 200], // The center of the graph by default
gravity: 20,
speed: 2,
clustering: true,
clusterGravity: 30,
maxIteration: 2000,
workerEnabled: true, // Whether to activate web-worker
},
});
layoutCfg.center
Type: Array
Example: [ 0, 0 ]
Default: The center of the graph
Required: false
Description: The center of the layout
layoutCfg.maxIteration
Type: Number
Default: 1000
Required: false
Description: The maximum iteration number
layoutCfg.gravity
Type: Number
Default: 10
Required: false
Description: The gravity, which will affect the compactness of the layout
layoutCfg.speed
Type: Number
Default: 1
Required: false
Description: The moving speed of each iteraction. Large value of the speed might lead to violent swing
layoutCfg.clustering
Type: Boolean
Default: false
Required: false
Description: Whether to layout by cluster
layoutCfg.clusterGravity
Type: Number
Default: 10
Required: false
Description: The gravity of each cluster, which will affect the compactness of each cluster. Takes effect only when clustering is true
layoutCfg.workerEnabled
Type: Boolean
Default: false
Required: false
Description: Whether to enable the web-worker in case layout calculation takes too long to block page interaction