logoCreated with Sketch.

G6

Graph Layout

19 min read

Random

Random is the default layout in G6. It will take effect when layout is not assigned to the Graph instance and there is no position information in node data.

Configuration

center

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

width

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

height

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

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

Function

The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6.

Usage

Configure layout to the graph instance. If layout is not configured and there is no position information in node data, Random layout will take effect.

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

MDS

MDS (Multidimensional scaling) is used for project high dimensional data onto low dimensional space.

Configuration

center

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

linkDistance

Type: Number
Default: 50
Required: false
Description: The edge length

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

Function

The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6.

Usage

Configure layout to the graph instance. If layout is not configured and there is no position information in node data, Random layout will take effect.

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'mds',
    workerEnabled: true, // Whether to activate web-worker
  },
});

Force

Force is the classical force-dicrected layout algorithm, which corresponds to force-directed layout in d3.js.

Configuration

center

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

linkDistance

Type: Number
Default: 50
Required: false
Description: The edge length

nodeStrength

Type: Number
Default: null
Required: false
Description: The strength of node force. Positive value means attractive force, negative value means repulsive force

edgeStrength

Type: Number
Default: null
Required: false
Description: The strength of edge force. Calculated according to the degree of nodes by default

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.

collideStrength

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

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

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)

alpha

Type: Number
Default: 0.3
Required: false
Description: The current alpha of convergence

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

alphaMin

Type: Number
Default: 0.001
Required: false
Description: The threshold to stop the iteration

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

onTick

Type: Function
Default: {}
Required: false
Description: The callback function of each iteration

onLayoutEnd

Type: Function
Default: {}
Required: false
Description: The callback function after layout

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

Function

The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6.

Usage

Configure layout to the graph instance. If layout is not configured and there is no position information in node data, Random layout will take effect.

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');
    },
  },
});

Fruchterman

Fruchterman is a kind of force-directed layout. G6 implements it according to the paper Graph Drawing by Force-directed Placement.

Configuration

center

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

maxIteration

Type: Number
Default: 1000
Required: false
Description: The maximum iteration number

gravity

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

speed

Type: Number
Default: 1
Required: false
Description: The moving speed of each iteraction. Large value of the speed might lead to violent swing

clustering

Type: Boolean
Default: false
Required: false
Description: Whether to layout by cluster

clusterGravity

Type: Number
Default: 10
Required: false
Description: The gravity of each cluster, which will affect the compactness of each cluster. Takes effect only when clustering is true

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

Function

The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6.

Usage

Configure layout to the graph instance. If layout is not configured and there is no position information in node data, Random layout will take effect.

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'fruchterman',
    center: [200, 200], // The center of the graph by default
    gravity: 20,
    speed: 2,
    clustering: true,
    clusterGravity: 30,
    maxIteration: 2000,
    workerEnabled: true, // Whether to activate web-worker
  },
});

Circular

Circular layout arranges the node on a circle. By tuning the configurations, user can adjust the node ordering method, division number, radial layout, and so on. G6 implements it according to the paper: A framework and algorithms for circular drawings of graphs.


Configuration

center

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

radius

Type: Number
Default: null
Required: false
Description: The radius of the circle. If the raidus exists, startRadius and endRadius do not take effect.

startRadius

Type: Number
Default: null
Required: false
Description: The start radius of spiral layout

endRadius

Type: Number
Default: null
Required: false
Description: The end radius of spiral layout

clockwise

Type: Boolean
Default: true
Required: false
Description: Whether to layout clockwisely

divisions

Type: Number
Default: 1
Required: false
Description: The division number of the nodes on the circle. Takes effect when endRadius - startRadius !== 0

ordering

Type: String
Default: false
Options: null | 'topology' | 'degree'
Required: false
Description: The ordering method for nodes. null by default, which means the nodes are arranged in data order. 'topology' means in topology order; 'degree' means in degree order.

angleRatio

Type: Number
Default: 1
Required: false
Description: How many 2*PIs Between the first node and the last node

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

Function

The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6.

Usage

Configure layout to the graph instance. If layout is not configured and there is no position information in node data, Random layout will take effect.

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'circular',
    center: [200, 200], // The center of the graph by default
    radius: null,
    startRadius: 10,
    endRadius: 100,
    clockwise: false,
    divisions: 5,
    ordering: 'degree',
    angleRatio: 1,
  },
});

Radial

Radial layout arranges the nodes to concentrics centered at a focus node according to their shortest path length to the focus node. G6 implements it according to the paper: More Flexible Radial Layout.

Configuration

center

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

linkDistance

Type: Number
Default: 50
Required: false
Description: The edge length.

maxIteration

Type: Number
Default: 1000
Required: false
Description: The max iteration number.

focusNode

Type: String | Object
Default: null
Required: false
Description: The focus node of the radial layout. The first node of the data is the default value. It can be the id of a node or the node item.

unitRadius

Type: Number
Default: 100
Required: false
Description: The separation between adjacent circles. If unitRadius is not assigned, the layout will fill the canvas automatically.

preventOverlap

Type: Boolean
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.

nodeSize

Type: Number
Default: 10
Required: false
Description: The diameter of the node. It is used for preventing node overlappings

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)

maxPreventOverlapIteration

Type: Number
Default: 200
Required: false
Description: The maximum iteration number of preventing node overlappings

strictRadial

Type: Boolean
Default: true
Required: false
Description: Whether to layout the graph as strict radial, which means the nodes will be arranged on each circle strictly. Takes effect only when preventOverlap is true

  • When preventOverlap is true, and strictRadial is false, the overlapped nodes are arranged along their circles strictly. But for the situation that there are too many nodes on a circle to be arranged, the overlappings might not be eliminated completely
  • When preventOverlap is true, and strictRadial is true , the overlapped nodes can be arranged around their circle with small offsets.

（Left）preventOverlap = false.（Center）preventOverlap = false, strictRadial = true. (Right)preventOverlap = false, strictRadial = false.

sortBy

Type: String
Default: undefined
Required: false
Description: Sort the nodes of the same level. undefined by default, which means place the nodes with connections as close as possible; 'data' means place the node according to the ordering in data, the closer the nodes in data ordering, the closer the nodes will be placed. sortBy also can be assigned to any name of property in nodes data, such as 'cluster', 'name' and so on (make sure the property exists in the data)

sortStrength

Type: Number
Default: 10
Required: false
Description: The strength to sort the nodes in the same circle. Larger number means place the nodes with smaller distance of sortBy more closely. Takes effect only when sortBy is not undefined

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

Function

The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6.

Usage

Configure layout to the graph instance. If layout is not configured and there is no position information in node data, Random layout will take effect.

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'radial',
    center: [200, 200], // The center of the graph by default
    linkDistance: 50, // The edge length
    maxIteration: 1000,
    focusNode: 'node11',
    unitRadius: 100,
    preventOverlap: true, // nodeSize or size in data is required for preventOverlap: true
    nodeSize: 30,
    strictRadial: false,
    workerEnabled: true, // Whether to activate web-worker
  },
});

Dagre

Dagre is an hierarchical layout.

Configuration

rankdir

Type: String
Options: 'TB' | 'BT' | 'LR' | 'RL'
Default: 'TB'
Required: false
Description: The layout direction. T:top; B:bottom; L:left; R:right.

  • 'TB':Layout the graph from the top to the bottom;
  • 'BT':Layout the graph from the bottom to the top;
  • 'LR':Layout the graph from the top left the right;
  • 'RL':Layout the graph from the top right the left.

align

Type: String
Options: 'UL' | 'UR' | 'DL' | 'DR'
Default: 'UL'
Required: false
Description: The alignment of the nodes. U: upper; D: down; L: left; R: right

  • 'UL': aligns the nodes to the upper left;
  • 'UR': aligns the nodes to the upper right;
  • 'DL': aligns the nodes to the down left;
  • 'DR': aligns the nodes to the upper right.

nodesep

Type: Number
Default: 50
Required: false
Description: The separation between nodes with unit px. When rankdir is 'TB' or 'BT', nodesep represents the horizontal separations between nodes; When rankdir is 'LR' or 'RL', nodesep represents the vertical separations between nodes

ranksep

Type: Function
Default: undefined
Required: false
Description: The separations between adjacent levels with unit px. When rankdir is 'TB' or 'BT', ranksep represents the vertical separations between adjacent levels; when rankdir is 'LR' or 'RL', rankdir represents the horizontal separations between adjacent levels

nodesepFunc

Type: Function
Default: undefined
Example: 

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


Required: false
Description: The function for node separation with unit px. You can adjust the separations between different node pairs by using this function instead of nodesep. When rankdir is 'LR' or 'RL', nodesep represents the vertical separations between nodes. The priority of nodesepFunc is lower than nodesep, which means if nodesep is assigned, the nodesepFunc will not take effect

ranksepFunc

Type: Number
Default: 50
Example: 

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


Required: false
Description: The function for level separation with unit px. You can adjust the separations between different adjacent levels by using this function instead of ranksep. When rankdir is 'TB' or 'BT', ranksep represents the vertical separations between adjacent levels; when rankdir is 'LR' or 'RL', rankdir represents the horizontal separations between adjacent levels. The priority of ranksepFunc is lower than ranksep, which means if ranksep is assigned, the ranksepFunc will not take effect

controlPoints

Type: Boolean
Default: true
Required: false
Description: Whether to keep the control points of layout

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

Function

The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6.

Usage

Configure layout to the graph instance. If layout is not configured and there is no position information in node data, Random layout will take effect.

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'dagre',
    rankdir: 'LR', // The center of the graph by default
    align: 'DL',
    nodesep: 20,
    ranksep: 50,
    controlPoints: true,
  },
});

Concentric

Concentric arranges the nodes on several concentric circles. By tuning the parameters, users could order the nodes according to some property of node data, degree by default. Larger the value, more center the node will be placed.

Configuration

center

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

preventOverlap

Type: Boolean
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. If the size in node data does not exist either, nodeSize is assigned to 30 by default

nodeSize

Type: Number
Default: 30
Required: false
Description: The diameter of the node. It is used for preventing node overlappings

minNodeSpacing

Type: Number
Default: 10
Required: false
Description: The minimum separation between adjacent circles

sweep

Type: Number
Default: undefined
Required: false
Description: How many radians should be between the first and last node (defaults to full circle). If it is undefined, 2 * Math.PI * (1 - 1 / |level.nodes|) will be used, where level.nodes is nodes set of each level, |level.nodes| is the number of nodes of the level

equidistant

Type: Boolean
Default: false
Required: false
Description: Whether levels have an equal radial distance between them, may cause bounding box overflow

startAngle

Type: Number
Default: 3 / 2 * Math.PI
Required: false
Description: Where nodes start in radians

clockwise

Type: Boolean
Default: false
Required: false
Description: Place the nodes in clockwise or not

maxLevelDiff

Type: Number
默认值:undefined
Required: false
Description: The sum of concentric values in each level. If it is undefined, maxValue / 4 will take place, where maxValue is the max value of ordering properties. For example, if sortBy is 'degree', maxValue is the max degree value of all the nodes

sortBy

Type: String
Default: undefined
Required: false
Description: Order the nodes according to this parameter. It is the property's name of node. The node with higher value will be placed to the center. If it is undefined, the algorithm will order the nodes by their degree

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

Function

The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6.

Usage

Configure layout to the graph instance. If layout is not configured and there is no position information in node data, Random layout will take effect.

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'concentric',
    center: [200, 200], // The center of the graph by default
    linkDistance: 50, // The edge length
    preventOverlap: true, // nodeSize or size in data is required for preventOverlap: true
    nodeSize: 30,
    sweep: 10,
    equidistant: false,
    startAngle: 0,
    clockwise: false,
    maxLevelDiff: 10,
    sortBy: 'degree',
    workerEnabled: true, // Whether to activate web-worker
  },
});

Grid

Grid orders the nodes according to the configurations and arranged them onto grid.

Configuration

begin

Type: Array
Example: [ 0, 0 ]
Default: [ 0, 0 ]
Required: false
Description: The place where the grid begin (left top)

preventOverlap

Type: Boolean
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. If the size in node data does not exist either, nodeSize is assigned to 30 by default

nodeSize

Type: Number
Default: 30
Required: false
Description: The diameter of the node. It is used for preventing node overlappings.

preventOverlapPadding

Type: Number
Default: 10
Required: false
Description: The minimum padding between nodes to prevent node overlappings. Takes effect when preventOverlap is true

condense

Type: Boolean
Default: false
Required: false
Description: Wheter to utilize the minimum space of the canvas. false means utilizing the full space, true means utilizing the minimum space.

rows

Type: Number
Default: undefined
Required: false
Description: The row number of the grid. If rows is undefined, the algorithm will calculate it according to the space and node numbers automatically

cols

Type: Number
Default: undefined
Required: false
Description: The column number of the grid. If cols is undefined, the algorithm will calculate it according to the space and node numbers automatically

sortBy

Type: String
Default: undefined
Required: false
Description: The ordering method for nodes. Smaller the index in the ordered array, more center the node will be placed. If sortBy is undefined, the algorithm order the nodes according to their degrees

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

Function

The same as the superclass Layout, users do not need to concern about the function calling, which will be controlled by G6.

Usage

Configure layout to the graph instance. If layout is not configured and there is no position information in node data, Random layout will take effect.

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'grid',
    begin: [0, 0],
    preventOverlap: true, // nodeSize or size in data is required for preventOverlap: true
    preventOverlapPdding: 20,
    nodeSize: 30,
    condense: false,
    rows: 5,
    cols: 5,
    sortBy: 'degree',
  },
});