ComboForce

5 min read

It is a new feature of V3.5. Combo Force is designed for the graph with combos based on classical force directed layout algorith. It modifies the forces between nodes according to their combo infomation to achieve a final result with clustering nodes inside each combo and no overlappings.

img
const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  groupByTypes: false, // If you want to have a combo graph with reasonable visual levels of nodes, edges, and combo, set groupByTypes to false
  layout: {
    type: 'comboForce',
    center: [ 200, 200 ],     // The center of the graph by default
    linkDistance: 50,         // Edge length
    nodeStrength: 30,
    edgeStrength: 0.1,
    onTick: () => {
      console.log('ticking');
    },
    onLayoutEnd: () => {
      console.log('combo 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.maxIteration

Type: Number
Example: 100
Default: 100
Required: false
Description: The max number of the interations

layoutCfg.linkDistance

Type: Number / Function
Default: 10
Required: false
Description: The edge length

layoutCfg.nodeStrength

Type: Number / Function
Default: 30
Required: false
Description: The strength of node force

layoutCfg.edgeStrength

Type: Number / Function
Default: 0.2
Required: false
Description: The strength of edge force

layoutCfg.preventOverlap

Type: Number
Default: false
Required: false
Description: Whether to prevent node overlappings and combo overlappings. If it is assign true, preventNodeOverlap and preventComboOverlap will be set to true. See the API of preventNodeOverlap and preventComboOverlap for more detail

layoutCfg.preventNodeOverlap

Type: Number
Default: true
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.preventComboOverlap

Type: Number
Default: true
Required: false
Description: Whether to prevent combo overlappings

layoutCfg.collideStrength

Type: Number
Default: undefined
Required: false
Description: The unified strength of force for preventing node overlappings and combo overlappings. The range is [0, 1]. If it is not undefined, the nodeCollideStrength and comboCollideStrength will be set to the same value

layoutCfg.nodeCollideStrength

Type: Number
Default: 0.5
Required: false
Description: The strength of force for preventing node overlappings. The range is [0, 1]

layoutCfg.comboCollideStrength

Type: Number
Default: 0.5
Required: false
Description: The strength of force for preventing combo 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 preventNodeOverlap or 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)


img

layoutCfg.comboSpacing

Type: Number / Function
Default: 0
Required: false
Example: Example 1: 10
Example 2:

(d) => {
  // d is a combo
  if (d.id === 'combo1') {
    return 100;
  }
  return 10;
};


Description: Takes effect when preventComboOverlap or preventOverlap is true. It is the minimum distance between combos to prevent combo overlappings. It can be a function to define different distances for different combos (example 2)

layoutCfg.comboPadding

Type: Number / Function
Default: 10
Required: false
Example: Example 1: 10
Example 2:

(d) => {
  // d is a combo
  if (d.id === 'combo1') {
    return 100;
  }
  return 10;
};


Description: The padding value inside each combo. It is not about rendering, only used for force calculation

layoutCfg.alpha

Type: Number
Default: 1
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.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.gravity

Type: Number
Default: 10
Required: false
Description: The gravity, which will affect the compactness of the layout

layoutCfg.comboGravity

Type: Number
Default: 30
Required: false
Description: The gravity of each combo, which will affect the compactness of each combo

layoutCfg.optimizeRangeFactor

Type: Number
Default: 1
Required: false
Description: When the distance between two nodes is larger than optimizeRangeFactor * width, the forces between them will not be calculated any more. A proper value for optimizeRangeFactor will lead to less calculation to optimize the performance of the layout

layoutCfg.depthAttractiveForceScale

Type: Number
Default: 0.5
Required: false
Description: The scale for adjusting the strength of attractive force between nodes with different depths. The range is [0, 1]. Lager the depth difference, smaller the attractive force strength

layoutCfg.depthRepulsiveForceScale

Type: Number
Default: 2
Required: false
Description: The scale for adjusting the strength of repulsive force between nodes with different depths. The range is [1, Infinity]. Lager the depth difference, larger the attractive force strength

layoutCfg.velocityDecay

Type: Number
Default: 0.6
Required: false
Description: The decay speed of the moving velocity of nodes

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