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.
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
