Force-directed layout is a set of algorithms which are imporved and extended by lots of researchers based on the earliest classical force-directed algorithm. They simulate the nodes and edges in the graph as the physical objects. There are attractive forces and repulsive forces between nodes to iteratively move them to reach a reasonable layout.

Usage

The classical force-directed layout in G6 comes from d3.js. As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout.

• Example 1 : Basic force-directed layout and dragging interactions.
• Example 2 : Prevent node overlappings.
• Example 3 : Adjust the link distances and forces for different nodes.
• Example 4 : Fix the dragged node.
• Example 5 : Translate the layout parameters in dynamic.
• Example 6 : The bubbles layout and interactions.
• Example 7 : Constrain the layout in a certain area.

center

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

linkDistance

Type: Number
Default: 50
Required: false
Explanation: The length of the edges

nodeStrength

Type: Number
Default: null
Required: false
Explanation: The force strengh between each pair of nodes. Positive value represents the attractive force, nagtive value represents the repulsive force

edgeStrength

Type: Number
Default: null
Required: false
Explanation: The force strengh between nodes which are connected by an edge. It will be adjusted according to the nodes' degree by default

collideStrength

Type: Number
Default: 1
Required: false
Explanation: The force strengh to prevent node overlappings. The range is [0, 1]

nodeSize

Type: Number
Default: 10
Required: false
Explanation: The size of nodes(diameter). It will be used for collide detections to prevent node overlappings. If it is not assigned, this algorithm will take the sizes of nodes in data into consider. If it is not assigned and there are no sizes in data, 10 will take effect.

alpha

Type: Number
Default: 0.3
Required: false
Explanation: The convergence's threshold of current iteration

alphaDecay

Type: Number
Default: 0.028
Required: false
Explanation: The decay of the convergence's threshold. The range is [0, 1]. 0.028 corresponds to 300 iterations

alphaMin

Type: Number
Default: 0.001
Required: false
Explanation: The threshold to stop the iterations

forceSimulation

Type: Object
Default: null
Required: false
Explanation: Custom force method. If it is not assigned, d3's force method will take effect

onTick

Type: Function
Default: {}
Required: false
Explanation: Callback function after each iteration

onLayoutEnd

Type: Function
Default: {}
Required: false
Explanation: Callback function after layout