2.8 KiB
| title | order |
|---|---|
| Circular | 3 |
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.
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