3.2 KiB
| title | order |
|---|---|
| ComboCombined | 3 |
This document showcases all the configuration options for the Combo combined layout. ComboCombined Layout DEMO.
center
Type: [number, number]
Default: The center of the canvas.
Required: false
Description: The center of the layout.
outerLayout
Type: LayoutInstance
Default: Force layout instance
Required: false
Description:The outer layout algorithm, default to force. See the documentation of the used layout for specific parameters. By default, the force layout uses the following parameters:
outerLayout: new G6.Extensions.ForceLayout({
gravity: 1,
factor: 2,
linkDistance: (edge: EdgeModel, source: NodeModel, target: NodeModel) => {
const nodeSize = ((source.data.size?.[0] || 30) + (target.data.size?.[0] || 30)) / 2;
return Math.min(nodeSize * 1.5, 700);
},
});
innerLayout
Type: LayoutInstance
Default: Concentric layout instance
Required: false
Description: The inner layout algorithm for the combo. It needs to use a synchronous layout algorithm, default to concentric. See the documentation of the used layout for specific parameters. By default, the concentric layout uses the following parameters:
innerLayout: new G6.Extensions.ConcentricLayout({
sortBy: 'id',
});
comboPadding
Type: number | (comboModel: ComboModel) => number
Default: 10
Required: false
Description: The padding value inside the combo, not used for rendering, only used for force calculation. It is recommended to set it to the same value as the combo's internal padding on the view. Example:
(comboModel) => {
// comboModel is a combo inner model
if (d.id === 'combo1') {
return 100;
}
return 10;
};
nodeSize
Type: number | number[] | (nodeModel: NodeModel) => number
Default: 10
Required: false
Description: The size of the node (diameter) used for collision detection. If not specified, it is calculated based on the data.size property in the node model. If neither is specified, the default size is 10.
spacing
Type: number | number[] | (nodeModel: NodeModel) => number
Default: 0
Required: false
Description: preventNodeOverlap 或 preventOverlap 为 true 时生效, 防止重叠时节点/ combo 边缘间距的最小值。可以是回调函数, 为不同节点设置不同的最小间距, 如示例
示例：
(nodeModel: NodeModel) => {
// nodeModel is a node's inner model
if (nodeModel.id === 'node1') {
return 100;
}
return 10;
};
workerEnabled
Type: boolean
Default: false
Required: false
Description: Whether to enable web worker for layout calculation to prevent blocking page interaction when the calculation takes too long.
⚠️ Note: When workerEnabled: true, all parameter types of functions are not supported.