Concentric

3 min read

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.

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

layoutCfg.center

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

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

layoutCfg.nodeSize

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

layoutCfg.minNodeSpacing

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

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

layoutCfg.equidistant

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

layoutCfg.startAngle

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

layoutCfg.clockwise

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

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

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

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