Force Atlas 2

3 min read

It is a new feature of V3.2.2. FA2 is a kind of force directed layout, which performs better on the convergence and compactness.

img
const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'forceAtlas2',
    width: 300,
    height: 300,
  },
});

layoutCfg.center

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

layoutCfg.width

Type: Number
Default: The width of the graph
Required: false
Description: The width of the layout

layoutCfg.height

Type: Number
Default: The height of the graph
Required: false
Description: The height of the layout

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

layoutCfg.kr

Type: Number
Default: 5
Required: false
Description: Repulsive parameter, smaller the kr, more compact the graph

layoutCfg.kg

Type: Number
Default: 5
Required: false
Description: The parameter for the gravity. Larger kg, the graph will be more compact to the center

layoutCfg.ks

Type: Number
Default: 0.1
Required: false
Description: The moving speed of the nodes during iterations

layoutCfg.tao

Type: Number
Default: 0.1
Required: false
Description: The threshold of the swinging

layoutCfg.mode

Type: 'normal' | 'linlog'
Default: 'normal'
Required: false
Description: Under 'linlog' mode, the cluster will be more compact

layoutCfg.preventOverlap

Type: boolean
Default: false
Required: false
Description: Whether prevent node overlappings

layoutCfg.dissuadeHubs

Type: boolean
Default: false
Required: false
Description: Wheather to enable hub mode. If it is true, the nodes with larger in-degree will be placed on the center in higher priority

layoutCfg.barnesHut

Type: boolean
Default: undefined
Required: false
Description: Whether to enable the barnes hut speedup, which is the quad-tree optimization. Due to the computation for quad-tree re-build in each iteration, we sugguest to enable it in large graph. It is undefined by deafult, when the number of nodes is larger than 250, it will be activated automatically. If it is set to be false, it will not be activated anyway

layoutCfg.prune

Type: boolean
Default: undefined
Required: false
Description: Whether to enable auto pruning. It is undefined by default, which means when the number of nodes is larger than 100, it will be activated automatically. If it is set to be false, it will not be activated anyway

layoutCfg.maxIteration

Type: number
Default: 0
Required: false
Description: The max iteration number. When it is set to be 0, the iteration number will be automatically adjusted according to the convergence

layoutCfg.getWidth

Type: function
Default: undefined
Required: false
Description: The width function of the nodes, the parameter is the data model of a node

layoutCfg.getHeight

Type: function
Default: undefined
Required: false
Description: The height function of the nodes, the parameter is the data model of a node

layoutCfg.onLayoutEnd

Type: function
Default: undefined
Required: false
Description: The callback function of layout

layoutCfg.onTick

Type: function
Default: undefined
Required: false
Description: The callback function for each iteration