Circular

2 min read
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.

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

layoutCfg.center

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

layoutCfg.radius

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

layoutCfg.startRadius

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

layoutCfg.endRadius

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

layoutCfg.clockwise

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

layoutCfg.divisions

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

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

layoutCfg.angleRatio

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

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