CompactBox Layout

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.

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

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: { data?: 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:

({ data }) => {
  // data is a node
  if (data.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'.

Example Code

import { Graph, treeToGraphData } from '@antv/g6';

/**
 * If the node is a leaf node
 * @param {*} d - node data
 * @returns {boolean} - whether the node is a leaf node
 */
function isLeafNode(d) {
  return !d.children || d.children.length === 0;
}

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
  .then((res) => res.json())
  .then((data) => {
    const graph = new Graph({
      container: 'container',
      autoFit: 'view',
      data: treeToGraphData(data),
      behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand'],
      node: {
        style: {
          labelText: (d) => d.id,
          labelPlacement: (d) => (isLeafNode(d) ? 'right' : 'left'),
          labelBackground: true,
          ports: [{ placement: 'right' }, { placement: 'left' }],
        },
        animation: {
          enter: false,
        },
      },
      edge: {
        type: 'cubic-horizontal',
        animation: {
          enter: false,
        },
      },
      layout: {
        type: 'compact-box',
        direction: 'LR',
        getHeight: function getHeight() {
          return 32;
        },
        getWidth: function getWidth() {
          return 32;
        },
        getVGap: function getVGap() {
          return 10;
        },
        getHGap: function getHGap() {
          return 100;
        },
      },
    });

    graph.render();
  });

import { Graph } from '@antv/g6';
import GUI from 'lil-gui';

export function addPanel(renderPanel: (gui: GUI) => void) {
  const gui = new GUI({ container: document.body });
  gui.title('Control');
  Object.assign(gui.domElement.style, { position: 'absolute', top: '0', right: '0', zIndex: '10' });
  renderPanel(gui);
  addEventListener('pagehide', () => gui.destroy(), { once: true });
}

export async function createGraph(
  options: ConstructorParameters<typeof Graph>[0],
  size: { width?: number; height?: number } = {},
  renderPanel?: (gui: GUI, graph: Graph) => void,
) {
  const container = document.createElement('div');
  Object.assign(container.style, {
    width: '100%',
    maxWidth: `${size.width || 600}px`,
    height: `${size.height || 400}px`,
  });
  document.getElementById('container')!.append(container);
  const graph = new Graph({ ...size, ...options, width: container.clientWidth, container, autoResize: true });
  addEventListener('pagehide', () => graph.destroy(), { once: true });
  await graph.render();
  if (renderPanel) addPanel((gui) => renderPanel(gui, graph));
  return container;
}