logo

G6

  • Docs
  • API
  • Playground
  • Community
  • Productsantv logo arrow
  • 5.0.49
  • Introduction
  • Data
  • Getting Started
    • Quick Start
    • Installation
    • Integration
      • react
      • vue
      • angular
    • Step-by-step guide
  • Graph
    • Extensions En
    • Graph
    • Options
    • extension
  • Element
    • Element Overview
    • Element State
    • Node
      • Node Overview
      • Common Node Configuration
      • Circle Node
      • Diamond Node
      • Donut Node
      • Ellipse Node
      • Hexagon Node
      • HTML Node
      • Image Node
      • Rect Node
      • Star Node
      • Triangle Node
      • Custom Node
      • Define Nodes with React
    • Edge
      • Edge Overview
      • Edge Common Configuration
      • Cubic Bezier Curve Edge
      • CubicHorizontal Bezier Curve Edge
      • CubicVertical Bezier Curve Edge
      • Line Edge
      • Polyline Edge
      • Quadratic Bezier Curve Edge
      • Custom Edge
    • Combo
      • Combo Overview
      • Combo Common Options
      • Circle Combo
      • Rect Combo
      • Custom Combo
    • Shape
      • Shape and KeyShape
      • Atomic Shapes and Their Properties
      • Design and Implementation of Composite Shape
  • Layout
    • Layout Overview
    • Common Layout Configuration Options
    • AntvDagre Layout
    • Circular Layout
    • ComboCombined Layout
    • CompactBox Layout
    • Concentric Layout
    • 3D Force-Directed Layout
    • D3 Force-Directed Layout
    • Dagre Layout
    • Dendrogram Layout
    • Fishbone Layout
    • ForceAtlas2 Force-directed Layout
    • Force-directed Layout
    • Fruchterman Force-directed Layout
    • Grid Layout
    • Indented Tree
    • MDS High-dimensional Data Dimensionality Reduction Layout
    • Mindmap Tree
    • Radial Layout
    • Random Layout
    • Snake Layout
    • Custom Layout
  • Behavior
    • Behavior Overview
    • ZoomCanvas
    • AutoAdaptLabel
    • BrushSelect
    • ClickSelect
    • CollapseExpand
    • CreateEdge
    • DragCanvas
    • DragElement
    • DragElementForce
    • FixElementSize
    • FocusElement
    • HoverActivate
    • LassoSelect
    • OptimizeViewportTransform
    • ScrollCanvas
    • Custom Behavior
  • Plugin
    • Plugin Overview
    • Background
    • BubbleSets
    • Contextmenu
    • EdgeBundling
    • EdgeFilterLens
    • Fisheye
    • Fullscreen
    • GridLine
    • History
    • Hull
    • Legend
    • Minimap
    • Snapline
    • Timebar
    • Toolbar
    • Tooltip
    • Watermark
    • Custom Plugin
  • Transform
    • Data Transformation Overview
    • MapNodeSize
    • PlaceRadialLabels
    • ProcessParallelEdges
    • Custom Transform
  • Theme
    • Theme Overview
    • Custom Theme
    • Palette
    • Custom Palette
  • Animation
    • Animation Overview
    • Custom Animation
  • Further Reading
    • Event
    • renderer
    • coordinate
    • download-image
    • Using Iconfont
    • Use 3D
    • Bundle Project
  • What's new
    • Feature
    • Upgrade To 5.0
  • FAQ
  • contribute

Rect Combo

Previous
Circle Combo
Next
Custom Combo

Resource

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-Interactive solution
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

Overview

The rectangular combo organizes content with right-angle boundaries, supporting strict hierarchical structures.

Applicable scenarios:

  • System Architecture Diagrams: Such as service layering within system architecture, and subdivisions within each layer.
  • Geographical Area Division: Such as cities containing multiple areas, where the rectangular combo can intuitively display administrative boundaries or functional divisions.

Online Experience

createGraph(
{
data: {
nodes: [
{ id: 'node1', combo: 'combo1', style: { x: 250, y: 150 } },
{ id: 'node2', combo: 'combo1', style: { x: 350, y: 150 } },
{ id: 'node3', combo: 'combo2', style: { x: 250, y: 300 } },
],
combos: [
{ id: 'combo1', combo: 'combo2' },
{ id: 'combo2', style: {} },
],
},
node: { style: { fill: '#7e3feb' } },
combo: { type: 'rect' },
behaviors: ['collapse-expand'],
plugins: [{ type: 'grid-line', size: 30 }],
animation: true,
},
{ width: 600, height: 400 },
(gui, graph) => {
gui.add({ type: 'rect' }, 'type').disable();
},
);

设置 combo.type 为 rect 以使用矩形组合。

Style Configuration

If the element has its specific attributes, we will list them below. For all general style attributes, see BaseCombo

Example

The following example is a simple microservice architecture service layer:

import { Graph } from '@antv/g6';
const graph = new Graph({
container: 'container',
width: 600,
height: 400,
autoFit: 'center',
data: {
nodes: [
{ id: 'node1', combo: 'combo2', style: { x: 100, y: 100, labelText: '微服务1' } },
{ id: 'node2', combo: 'combo2', style: { x: 200, y: 100, labelText: '微服务2' } },
{ id: 'node3', combo: 'combo2', style: { x: 100, y: 200, labelText: '微服务3' } },
{ id: 'node4', combo: 'combo2', style: { x: 200, y: 200, labelText: '微服务4' } },
{ id: 'node5', combo: 'combo3', style: { x: 300, y: 100, labelText: '第三方登录' } },
{ id: 'node6', combo: 'combo3', style: { x: 300, y: 150, labelText: '任务调度' } },
{ id: 'node7', combo: 'combo3', style: { x: 300, y: 200, labelText: '消息服务' } },
],
edges: [
{ source: 'node1', target: 'node2' },
{ source: 'node1', target: 'node3' },
{ source: 'node3', target: 'node4' },
],
combos: [
{ id: 'combo1', style: { labelText: '服务层' } },
{ id: 'combo2', combo: 'combo1', style: { labelText: '业务微服务' } },
{ id: 'combo3', combo: 'combo1', style: { labelText: '集成模块' } },
],
},
node: {
type: 'rect',
},
edge: {
style: {
endArrow: true,
},
},
combo: {
type: 'rect',
style: {
padding: 16,
},
},
behaviors: ['drag-element', 'collapse-expand'],
animation: true,
});
graph.render();