Common Layout Configuration Options
Previous
Layout Overview
Next
AntvDagre Layout
Loading...
This article introduces the common attribute configurations for built-in layouts.
| 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 | - |
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