g6/docs/api/graphLayout/radial.en.md

title	order
Radial	4

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.

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

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
Default: 50
Required: false
Description: The edge length.

layoutCfg.maxIteration

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

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

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

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

layoutCfg.nodeSize

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

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

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

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

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

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

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