g6/packages/site/docs/manual/middle/layout/sub-layout-pipe.en.md

title	order
Sublayout Pipeline	4

Sublayout Pipeline

Supports by v4.3.0 and latter versions. Sublayout pipeline supports several sublayouts on different subgraphs by configuring Graph.layout.

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:

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:

// 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],
      }
    ]
  },
});