Introduction

Graph layouts are the algorithms arranging the node positions to obtain a understandable visualizaiton. According to the differences of data strucutre, the layouts can be categorized into: general graph layout and tree graph layout. There are several layout algorithms for them respectively. By utilizing the built-in layouts, Translating the layouts and their configurations, translating the data can be achieved. Besides, G6 provides the Web-Worker for general graph layout in case layout calculation takes too long to block page interaction.

Besides, G6 supports Custom Layout mechanism for users to design their own layout algorithm.

In fact, 'layout' is a free mechanism in G6. The built-in layouts only calculate and manipulate the x and y in node data. In other word, users can assign x and y to nodes by any other ways including the algorithms from the third-party libraries. Once G6 find the x and y information on data, it will render the graph according to it.

In this ducoment, we will introduce the layout algorithms in detail.

G6 Layouts Overview

• Random Layout: Randomizes the node postions;
• GForce Layout: Classical force-directed layout supports GPU parallel computing, supported by G6 4.0;
• Force Layout: Classical force-directed layout imported from d3;
• Fruchterman Layout: A kind of force-directed layout;
• Circular Layout: Arranges the nodes on a circle;
• Radial Layout: Arranges the nodes around a focus node radially;
• MDS Layout: Multidemensional Scaling;
• Dagre Layout: Arranges the nodes hierarchically;
• Concentric Layout: Arranges the nodes on concentric circles;
• Grid Layout: Arranges the nodes on grid.
• Combo Force Layout：New feature of V3.5 Designed for graph with combos.

Configure the Graph

Configure layout to the Graph instance to assign the layout methods and their configurations. The following code assigns the layout with type: 'force', which means the classical force-directed layout algorithm. The configurations preventOverlap: true and nodeSize: 30 are assigned to prevent node overlappings, where the nodeSize is used for collide detection. More layout configurations can be found in the following sections.

const graph = new G6.Graph({
  // ...                      // Other configurations for the graph
  layout: {
    // Object, the layout configuration. Random layout by default
    type: 'force',
    preventOverlap: true,
    nodeSize: 30,
    // workerEnabled: true, // Whether enable webworker
    // gpuEnabled: true // Whether enable GPU version. supported by G6 4.0, and only support gForce and fruchterman layout
    // ...                    // Other configurations for the layout
  },
});

Different layout algorithms have different configurations. For all the general graph layout algorithms in G6, you can enable the web-worker by configure workerEnabled: true in the layout configuration above. With web-worker, layout algorithms performed on large data with high cost will not block the web page.

When the layout is not assigned:

• If there is position information with x and y in node data, G6 renders the graph with them;
• If the position information does not exist in the node data, Random Layout will take effect by default.

Layouts for Graph

General graph layout API: General Graph Layout API.

Random

Description: Randomizes the node positions.
API: Random API
Configuration:

GForce

Description: GForce implements the classical force-directed layout algorithm by G6 4.0. It supports assign different masses and center gravities for different nodes freedomly. More importantly, it supports GPU parallel acceleration. If you want to fix the positions for some nodes during calculation, assign fx and fy for the nodes as fixing positions. Demo for fixing node.
API: GForce API
Configuration:

Name	Type	Example	Default	Description
center	Array	[ 0, 0 ]	The center of the graph	The center of the layout
linkDistance	Number / Function	Example 1: 50  Example 2: d => {   // d is an edge   if (d.id === 'edge1') {     return 100;   }   return 50; }	1	The edge length. It can be a function to define the different edge lengths for different edges (Example 2)
nodeStrength	Number / Function	Exmaple 1: -30  Exmaple 2: d => {   // d is a node   if (d.id === 'node1') {     return -100;   }   return -30; } / 1000	1000	The strength of node force. Positive value means repulsive force, negative value means attractive force (it is different from 'force')(As example 2)
edgeStrength	Number / Function	Example 1: 1  Example 2: d => {   // d is a node   if (d.id === 'node1') {     return 10;   }   return 1; }	200	The strength of edge force. Calculated according to the degree of nodes by default (As Example 2)
preventOverlap	Boolean	false	false	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	Array / Number	20	undefined	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	Number / Function	Example 1 : 10 Example 2 :  d => {   // d is a node   if (d.id === 'node1') {     return 100;   }   return 10; }	0	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)
minMovement	Number	0.1	0.5	When the average movement of nodes in one iteration is smaller than minMovement, terminate the layout
maxIteration	Number	500	1000	The max number of iterations. If the average movement do not reach minMovement but the iteration number is over maxIteration, terminate the layout
damping	Number	0.99	0.9	Range [0, 1], affect the speed of decreasing node moving speed. Large the number, slower the decreasing
maxSpeed	Number	10	1000	The max speed in each iteration
coulombDisScale	Number	0.003	0.005	A parameter for repulsive force between nodes. Large the number, larger the repulsion
getMass	Function	d => {   // d 是一个节点   if (d.id === 'node1') {     return 100;   }   return 10; }	undefined	It is a callback returns the mass of each node. If it is not assigned, the degree of each node will takes effect. The usage is similar to nodeSpacing
getCenter	Function	(d, degree) => {   // d is a node, degree is the degree of the node   if (d.degree === 0') {     return [100, 100, 10]; // x, y, strength   }   return [210, 150, 5]; // x, y, strength }	undefined	It is a callback returns gravity center and the gravity strength for each node
gravity	Number	20	10	The gravity strength to the center for all the nodes. Larger the number, more compact the nodes
onTick	Function		undefined	The callback function of each iteration
onLayoutEnd	Function		undefined	The callback function after layout
workerEnabled	Boolean	true / false	false	Whether to enable the web-worker in case layout calculation takes too long to block page interaction
gpuEnabled	Boolean	true / false	false	Whether to enable the GPU parallel computing, supported by G6 4.0. If the machine or browser does not support GPU computing, it will be degraded to CPU computing automatically.

Force

graphLayout/guide

Description: Classical force-directed layout algorithm. If you want to fix the positions for some nodes during calculation, assign fx and fy for the nodes as fixing positions. Demo for fixing the dragged node with force layout.
API: Force API
Configuration: Corresponds to the configurations in force-directed algorithm in d3.js

Name	Type	Example	Default	Description
center	Array	[ 0, 0 ]	The center of the graph	The center of the layout
linkDistance	Number / Function	Example 1: 50  Example 2: d => {   // d is an edge   if (d.id === 'edge1') {     return 100;   }   return 50; }	50	The edge length. It can be a function to define the different edge lengths for different edges (Example 2)
nodeStrength	Number / Function	Example 1: -30  Example 2: d => {   // d is a node   if (d.id === 'node1') {     return -100;   }   return -30; }	null	The strength of node force. Positive value means attractive force, negative value means repulsive force (Example 2)
edgeStrength	Number	Example 1: 1  Example 2: d => {   // d is a node   if (d.id === 'node1') {     return 10;   }   return 1; }	null	The strength of edge force, ranges from 0 to 1. Calculated according to the degree of nodes by default (Example 2)
preventOverlap	Boolean	false	false	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 nodeSize and size in data are both undefiend, nodeSize will be assigned to 10 by default
nodeSize	Array / Number	20	undefined	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	Number / Function	Example 1: 10 Example 2:   d => {   // d is a node   if (d.id === 'node1') {     return 100;   }   return 10; }	0	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)
alphaDecay	Number	0.03	0.028	The decay ratio of alpha for convergence. THe range is [0, 1]. 0.028 corresponds to 300 times iteration
alphaMin	Number	0.03	0.001	The threshold to stop the iteration
alpha	Number	0.1	0.3	The current alpha of convergence
collideStrength	Number	0.8	1	The strength of force for preventing node overlappings. The range is [0, 1]
clustering	Boolean	false	false	Whether run the force layout with clustering
clusterNodeStrength	Number	-1	-0.8	The force between nodes. It will be repulsive force while it is negative
clusterEdgeStrength	Number	0.1	0.2	The force along the edge
clusterEdgeDistance	Number	100	50	The edge length between the clusters
clusterNodeSize	Number	10	15	The node size(diameter) for clustering
clusterFociStrength	Number	0.8	0.5	The force for the clustering foci
forceSimulation	Object		null	Customed force simulation. If it is not assigned, the force simulation of d3.js will take effect
onTick	Function		{}	The callback function of each iteration
onLayoutEnd	Function		{}	The callback function after layout
workerEnabled	Boolean	true / false	false	Whether to enable the web-worker in case layout calculation takes too long to block page interaction

Fruchterman

Description: Fruchterman is a kind of force-directed layout. If you want to fix the positions for some nodes during calculation, assign fx and fy for the nodes as fixing positions. Demo for fixing node.
API: Fruchterman API
Configuration:

Circular

Description: Arranges the nodes on a circle.
API: Circular API
Configuration:

Radial

Description: Arranges the nodes to concentrics centered at a focus node according to their shortest path length to the focus node.
API: Radial API
Configuration:

Name	Type	Example	Default	Description
center	Array	[ 0, 0 ]	The center of the graph	The center of the layout
linkDistance	Number	50	50	The edge length
maxIteration	Number	1000	1000	The max iteration number.
focusNode	String / Object	'node1'	null	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	Number	10	100	The separation between adjacent circles. If unitRadius is not assigned, the layout will fill the canvas automatically.
preventOverlap	Boolean	false	false	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.
maxPreventOverlapIteration	Number	500	200	The maximum iteration number of preventing node overlappings
nodeSize	Number	10	10	The diameter of the node. It is used for preventing node overlappings. : 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 10 by default
nodeSpacing	Number / Function	Example 1: 10 Example 2:   d => {   // d is a node   if (d.id === 'node1') {     return 100;   }   return 10; }	0	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)
strictRadial	Boolean	true	false	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. Refer to Radial-strictRadial API - 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.
sortBy	String	'data' / 'cluster'	undefined	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	Number	10	10	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	Boolean	true / false	false	Whether to enable the web-worker in case layout calculation takes too long to block page interaction

MDS

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

Dagre

Description: An hierarchical layout.
API: Dagre API
Configuration:

Concentric

Tips: Concentric layout in G6 refers to cytoscape.js, we obey the MIT license
Description: Arranges the nodes on several concentric circles.
API: Concentric API
Configuration:

Grid

Tips: Concentric layout in G6 refers to cytoscape.js, we obey the MIT license.
Description: Orders the nodes according to the configurations and arranged them onto grid.
API: Grid API
Configuration:

Combo Force

API：Combo Force API
Parameters：

Name	Type	Example/Options	Default	Description
center	Array	[ 0, 0 ]	The center of the graph	The center of the layout
maxIteration	Number	100	100	The maximum iteration number
linkDistance	Number / Function	e.g. 1: 50  e.g. 2: d => {   // d is an edge   if (d.id === 'edge1') {     return 100;   }   return 50; }	10	The edge length
nodeStrength	Number / Function	e.g. 1: 10  e.g. 2: d => {   // d is a node   if (d.id === 'node1') {     return 10;   }   return 30; } / null	30	The strength of node force
edgeStrength	Number / Function	e.g. 1: 1  e.g. 2: d => {   // d is a node   if (d.id === 'node1') {     return 10;   }   return 1; }	0.2	The strength of edge force
preventOverlap	Boolean	false	false	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
preventNodeOverlap	Boolean	false	true	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
preventComboOverlap	Boolean	false	true	Whether to prevent combo overlappings
collideStrength	Number	0.1	undefined	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
nodeCollideStrength	Number	0.4	0.5	The strength of force for preventing node overlappings. The range is [0, 1]
comboCollideStrength	Number	0.4	0.5	The strength of force for preventing combo overlappings. The range is [0, 1]
nodeSize	Array / Number	10	10	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	Number / Function	e.g. 1 : 10 e.g. 2 :  d => {   // d is a node   if (d.id === 'node1') {     return 100;   }   return 10; }	0	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)
comboSpacing	Number / Function	e.g. 1 : 10 e.g. 2 :  d => {   // d is a node   if (d.id === 'node1') {     return 100;   }   return 10; }	0	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)
comboPadding	Number / Function	e.g. 1 : 10 e.g. 2 :  d => {   // d is a node   if (d.id === 'node1') {     return 100;   }   return 10; }	0	The padding value inside each combo. It is not about rendering, only used for force calculation
alphaDecay	Number	0.03	0.028	The decay ratio of alpha for convergence. The range is [0, 1]. 0.028 corresponds to 300 iterations
alphaMin	Number	0.03	0.001	The threshold to stop the iteration
alpha	Number	0.1	1	The current alpha of convergence
onTick	Function		{}	The callback function of each iteration
onLayoutEnd	Function		{}	The callback function after layout
gravity	Number		10	The gravity, which will affect the compactness of the layout
comboGravity	Number		30	The gravity of each combo, which will affect the compactness of each combo
optimizeRangeFactor	Number		1	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
depthAttractiveForceScale	Number		0.5	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
depthRepulsiveForceScale	Number		2	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
velocityDecay	Number	0.2	0.6	The decay speed of the moving velocity of nodes for each iteration
workerEnabled	Boolean	true / false	false	Whether to enable the web-worker in case layout calculation takes too long to block page interaction