5.0 KiB
| title | order |
|---|---|
| Force | 2 |
Force is the classical force-dicrected layout algorithm, which corresponds to force-directed layout in d3.js.
const graph = new G6.Graph({
container: 'mountNode',
width: 1000,
height: 600,
layout: {
type: 'force',
center: [200, 200], // The center of the graph by default
linkDistance: 50, // Edge length
nodeStrength: 30,
edgeStrength: 0.1,
collideStrength: 0.8,
nodeSize: 30,
alpha: 0.3,
alphaDecay: 0.028,
alphaMin: 0.01,
forceSimulation: null,
onTick: () => {
console.log('ticking');
},
onLayoutEnd: () => {
console.log('force layout done');
},
},
});
layoutCfg.center
Type: Array
Example: [ 0, 0 ]
Default: The center of the graph
Required: false
Description: The center of the layout
layoutCfg.linkDistance
Type: Number / Function
Default: 50
Required: false
Description: The edge length
layoutCfg.nodeStrength
Type: Number / Function
Default: null
Required: false
Description: The strength of node force. Positive value means attractive force, negative value means repulsive force
layoutCfg.edgeStrength
Type: Number / Function
Default: null
Required: false
Description: The strength of edge force. Calculated according to the degree of nodes by default
layoutCfg.preventOverlap
Type: Number
Default: false
Required: false
Description: Whether to prevent node overlappings. To activate preventing node overlappings, nodeSize is required, which is used for collide detection. The size in the node data will take effect if nodeSize is not assigned
layoutCfg.collideStrength
Type: Number
Default: 1
Required: false
Description: The strength of force for preventing node overlappings. The range is [0, 1]
layoutCfg.nodeSize
Type: Number
Default: 10
Required: false
Description: The diameter of the node. It is used for preventing node overlappings. If nodeSize is not assigned, the size property in node data will take effect. If the size in node data does not exist either, nodeSize is assigned to 10 by default
layoutCfg.nodeSpacing
Type: Number / Function
Default: 0
Required: false
Example: Example 1: 10
Example 2:
(d) => {
// d is a node
if (d.id === 'node1') {
return 100;
}
return 10;
};
Description: Takes effect when preventOverlap is true. It is the minimum distance between nodes to prevent node overlappings. It can be a function to define different distances for different nodes (example 2)
layoutCfg.alpha
Type: Number
Default: 0.3
Required: false
Description: The current alpha of convergence
layoutCfg.alphaDecay
Type: Number
Default: 0.028
Required: false
Description: The decay ratio of alpha for convergence. The range is [0, 1]. 0.028 corresponds to 300 iterations
layoutCfg.alphaMin
Type: Number
Default: 0.001
Required: false
Description: The threshold to stop the iteration
layoutCfg.clustering
Type: Boolean
Default: false
Required: false
Description: Whether run the force layout with clustering
layoutCfg.clusterNodeStrength
Type: Number
Default: -1
Required: false
Description: The force between nodes. It will be repulsive force while it is negative
layoutCfg.clusterEdgeStrength
Type: Number
Default: 0.1
Required: false
Description: The force along the edge
layoutCfg.clusterEdgeDistance
Type: Number
Default: 100
Required: false
Description: The edge length between the clusters
layoutCfg.clusterNodeSize
Type: Number
Default: 10
Required: false
Description: The node size(diameter) for clustering
layoutCfg.clusterFociStrength
Type: Number
Default: 0.8
Required: false
Description: The force for the clustering foci
layoutCfg.forceSimulation
Type: Object
Default: null
Required: false
Description: Customed force simulation. If it is not assigned, the force simulation of d3.js will take effect
layoutCfg.onTick
Type: Function
Default: {}
Required: false
Description: The callback function of each iteration
layoutCfg.onLayoutEnd
Type: Function
Default: {}
Required: false
Description: The callback function after 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.