Overview

ComboCombined composite layout is suitable for graph data with composite group structures. It supports flexible configuration of the layout for elements inside combos as well as the layout between the outermost combos and nodes. By default, the internal elements use the Concentric layout, and the outer layout uses the gForce force-directed layout, balancing layout effect and overall stability. See more ComboCombined layout examples and source code.

Usage Scenarios

• User profile analysis: Analyze user behavior and product relationships, use user interest circles as combos, display specific products and behavior tags as internal nodes, and help operators identify user consumption paths.
• Supply chain management graph: Divide suppliers, manufacturers, warehouses, and distributors into combos by role or region, display resources, personnel, or equipment as internal nodes, and clearly show the internal structure of each link in the supply chain.

Options

innerLayout

Layout<any> Default: ConcentricLayout

The layout algorithm for elements inside the combo. Must use a synchronous layout algorithm. Default is ConcentricLayout. More layouts

Example:

import { ConcentricLayout } from '@antv/layout';

new Graph({
  layout: {
    type: 'combo-combined',
    /**
     * See more ConcentricLayout options:
     * https://github.com/antvis/layout/blob/v5/packages/layout/src/types.ts#L397
     */
    innerLayout: new ConcentricLayout({
      sortBy: 'id',
      nodeSize: 20,
      clockwise: true,
    }),
  },
});

outerLayout

Layout<any> Default: ForceLayout

The layout algorithm for the outermost layer. Default is ForceLayout. More layouts

Example

import { ForceLayout } from '@antv/layout';

new Graph({
  layout: {
    type: 'combo-combined',
    /**
     * See more ForceLayout options:
     * https://github.com/antvis/layout/blob/v5/packages/layout/src/types.ts#L950
     */
    outerLayout: new ForceLayout({
      gravity: 1,
      factor: 2,
      linkDistance: (edge: any, source: any, target: any) => {
        const nodeSize = ((source.size?.[0] || 30) + (target.size?.[0] || 30)) / 2;
        return Math.min(nodeSize * 1.5, 70);
      },
    }),
  },
});

Example Code