3.6 KiB
| title | order |
|---|---|
| Concentric | 5 |
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.
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