logo

G6

  • Docs
  • API
  • Playground
  • Community
  • Productsantv logo arrow
  • 5.0.48
  • 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
      • Build-in Node
        • Common Node Configurations
        • Diamond
        • Donut
        • Ellipse
        • Hexagon
        • Html
        • Image
        • Rect
        • Star
        • Triangle
        • Circle
      • Custom Node
      • Define Nodes with React
    • Edge
      • Edge Overview
      • Build-in Edge
        • Common Edge Configurations
        • Cubic Bezier Curve
        • CubicHorizontal Bezier Curve
        • CubicVertical Bezier Curve
        • Line
        • Polyline
        • Quadratic Bezier Curve
      • Custom Edge
    • Combo
      • Combo Overview
      • Build-in Combo
        • Circle
        • Combo Configuration Options
        • Rect
      • Custom Combo
    • Shape
      • Shape and KeyShape
      • Atomic Shapes and Their Properties
      • Design and Implementation of Composite Shape
  • Layout
    • Layout Overview
    • Build-in Layout
      • 3D Force-Directed Layout
      • AntvDagre Layout
      • Circular Layout
      • ComboCombined Layout
      • Common Layout Configuration Options
      • CompactBox
      • Concentric Layout
      • D3 Force-Directed Layout
      • Dagre Layout
      • Dendrogram Layout
      • Fishbone Layout
      • Force Force-directed Layout
      • ForceAtlas2 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
    • Build-in Behavior
      • AutoAdaptLabel
      • BrushSelect
      • ClickSelect
      • CollapseExpand
      • CreateEdge
      • DragCanvas
      • DragElement
      • DragElementForce
      • FixElementSize
      • FocusElement
      • HoverActivate
      • LassoSelect
      • OptimizeViewportTransform
      • ScrollCanvas
      • ZoomCanvas
    • Custom Behavior
  • Plugin
    • Plugin Overview
    • Build-in Plugin
      • Background
      • BubbleSets
      • Contextmenu
      • EdgeBundling
      • EdgeFilterLens
      • Fisheye
      • Fullscreen
      • GridLine
      • History
      • Hull
      • Legend
      • Minimap
      • Snapline
      • Timebar
      • Toolbar
      • Tooltip
      • Watermark
    • Custom Plugin
  • Transform
    • Data Transformation Overview
    • Build-in Transform
      • 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

CompactBox

Previous
Common Layout Configuration Options
Next
Concentric Layout

Resources

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-互动图形解决方案
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

Overview

The CompactBox layout is suitable for visualizing structured tree data. It is evolved from the classic Reingold–Tilford tidy layout algorithm, and considers the bounding box of each tree node during layout, effectively maintaining the compactness and hierarchical clarity of the tree structure. See more CompactBox layout examples and source code.

CompactBox Tidy Tree Layout Example

Usage Scenarios

  • Decision trees: The compact tree layout can visually and intuitively display each decision path.
  • Knowledge graphs: Show hierarchical relationships and connections between concepts. The compact layout can present complex knowledge networks in limited space.

Configuration

const graph = new Graph({
layout: {
type: 'compact-box',
direction: 'LR',
getHeight: () => 16,
getWidth: () => 16,
getVGap: () => 16,
getHGap: () => 40,
},
});

Options

PropertyDescriptionTypeDefaultRequired
typeLayout typecompact-box-✓
directionLayout direction, optionsLR | RL | TB | BT | H | VLR
getSideSet whether the node is on the left or right of the root. Only works for H direction. See below(d?: NodeData) => string
getIdCallback for node id(d?: NodeData) => string
getWidthCallback for node width(d?: NodeData) => number
getHeightCallback for node height(d?: NodeData) => number
getHGapCallback for horizontal gap(d?: NodeData) => number
getVGapCallback for vertical gap(d?: NodeData) => number
radialWhether to enable radial layout, see belowbooleanfalse

direction

LR | RL | TB | BT | H | V Default: LR

Tree layout direction

  • TB: Root at the top, layout downwards
  • BT: Root at the bottom, layout upwards
  • LR: Root at the left, layout to the right
  • RL: Root at the right, layout to the left
  • H: Root in the middle, horizontal symmetric layout. You can use getSide to specify the left/right logic for each node
  • V: Root in the middle, vertical symmetric layout

getSide

(d?: NodeData) => string

Set whether the node is on the left or right of the root. Only works for H direction. If not set, the algorithm will automatically assign left/right. See getSide auto logic.

Example:

(d) => {
// d is a node
if (d.id === 'test-child-id') return 'right';
return 'left';
};

getId

(d?: NodeData) => string

Callback for node id

Example:

(d) => {
// d is a node
return d.id + '_node';
};

getWidth

(d?: NodeData) => number

Callback for node width

Example:

(d) => {
// d is a node
if (d.id === 'testId') return 50;
return 100;
};

getHeight

(d?: NodeData) => number

Callback for node height

Example:

(d) => {
// d is a node
if (d.id === 'testId') return 50;
return 100;
};

getHGap

(d?: NodeData) => number

Callback for horizontal gap

Example:

(d) => {
// d is a node
if (d.id === 'testId') return 50;
return 100;
};

getVGap

(d?: NodeData) => number

Callback for vertical gap

Example:

(d) => {
// d is a node
if (d.id === 'testId') return 50;
return 100;
};

radial

boolean

Whether to use radial layout. If radial is true, it is recommended to set direction to 'LR' or 'RL'.

img

Example Code