Common Layout Configuration Options
This article introduces the common attribute configurations for built-in layouts.
General Configuration
| Property | Description | Type | Default | Required |
|---|---|---|---|---|
| type | Layout type, name of built-in or custom layout | Type | - | ✓ |
| isLayoutInvisibleNodes | Whether invisible nodes participate in the layout (takes effect when preLayout is true) | boolean | false | |
| nodeFilter | Nodes participating in the layout | (node: NodeData) => boolean | () => true | |
| comboFilter | Combos participating in the layout | (combo: ComboData) => boolean | () => true | |
| preLayout | Use pre-layout, calculate layout before initializing elements | boolean | false | |
| enableWorker | Whether to run the layout in a WebWorker | boolean | - | |
| iterations | Number of iterations for iterative layout | number | - | |
| animation | Whether to enable layout animation | boolean | false | |
| width | Width of the layout area, defaults to the current container width | number | - | |
| height | Height of the layout area, defaults to the current container height | number | - | |
| center | Layout center point | [number, number] | [number, number, number] | - | |
| node | Node field mapping, used to map business fields to layout fields | (datum) => ({ id?, x?, y?, z?, parentId?, isCombo? }) | - | |
| edge | Edge field mapping, used to map business fields to layout fields | (datum) => ({ id?, source?, target? }) | - |
Additional notes:
width/height/centerare common layout fields uniformly supported by@antvis/layout.node/edgeare used to adapt non-standard business fields such as customid/source/target.iterationsis the step count used by the G6 runtime to drive iterative layouts, and is not the same as some layouts’ internal algorithm parameters.
Type
Specifies the layout type, either the name of a built-in layout type or a custom layout.
const graph = new Graph({
// Other configurations...
layout: {
type: 'antv-dagre',
},
});
Optional values include:
antv-dagre: Custom layout based on dagrecircular: Circular layoutcombo-combined: Layout suitable for combinationsconcentric: Concentric layoutd3-force: Force-directed layout based on D3d3-force-3d: 3D Force-directed layoutdagre: Dagre layoutfishbone: Fishbone layoutforce: Force-directed layoutforce-atlas2: ForceAtlas2 layoutfruchterman: Fruchterman layoutgrid: Grid layoutmds: MDS layout for high-dimensional dataradial: Radial layoutrandom: Random layoutsnake: Snake layoutcompact-box: Compact box tree layoutdendrogram: Dendrogram layoutmindmap: Mindmap layoutindented: Indented tree layout