mirror of
https://gitee.com/antv/g6.git
synced 2024-12-16 02:21:25 +08:00
54 lines
1.9 KiB
Markdown
54 lines
1.9 KiB
Markdown
---
|
|
title: Sublayout Pipeline
|
|
order: 4
|
|
---
|
|
|
|
## Sublayout Pipeline
|
|
|
|
**Supports by v4.3.0 and latter versions**. Sublayout pipeline supports several sublayouts on different subgraphs by configuring `Graph.layout`.
|
|
|
|
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*TaymQYKOJkgAAAAAAAAAAAAAARQnAQ' alt="img" width='400px'>
|
|
|
|
### Usage
|
|
|
|
You can configure `layout.pipes` array when initializing the graph instance. Each item in the array is a sublayout pipe, and it contains the infomation about the layout type(`type`), configurations for this layout type, and node filtering function (`nodesFilter`). NOTICE that, if some nodes belong to several sublayouts in the same time, the result positions of these nodes will follow the last sublayout.
|
|
|
|
The format of the `layout.pipes`:
|
|
|
|
```javascript
|
|
type Pipes =
|
|
{
|
|
// the name of the layout method for this subgraph
|
|
type: 'random' | 'radial' | 'mds' | 'circular' | 'fruchterman' | 'force' | 'gForce' | 'dagre' | 'concentric' | 'grid' | 'forceAtlas2',
|
|
// node filtering function, the parameter is the node data, and it returns a boolean to indicate if the node belongs to this subgraph
|
|
nodesFilter: (node: NodeData) => boolean;
|
|
... // the configurations for this layout method, refer to the docs for different layout method pls
|
|
}[];
|
|
```
|
|
|
|
Usage demo:
|
|
|
|
```javascript
|
|
// configure the layout.pipes when initializing the graph instance
|
|
const graph = new G6.Graph({
|
|
// ... // other graph configurations
|
|
layout: {
|
|
pipes: [
|
|
{
|
|
// the name of the layout method for this subgraph
|
|
type: 'circular',
|
|
// indicate if the node belongs to the subgraph
|
|
nodesFilter: (node) => node.subGraphId === '1',
|
|
// ... other configurations for this layout method
|
|
},
|
|
{
|
|
type: 'grid',
|
|
nodesFilter: (node) => node.subGraphId === '2',
|
|
// other configurations for this layout method
|
|
begin: [100, 0],
|
|
}
|
|
]
|
|
},
|
|
});
|
|
```
|