pack

Circle Packing is a variant of tree structure diagrams that uses circles (instead of rectangles) to represent the entire hierarchy layer by layer. It is commonly used to describe containment relationships between data.

Getting Started

import { Chart } from '@antv/g2';
import { interpolateHcl } from 'd3-interpolate';

const chart = new Chart({
  container: 'container',
  padding: 20,
});

chart.options({
  type: 'pack',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/flare.json',
  },
  layout: {
    padding: 5,
  },
  encode: { value: 'value', color: 'depth' },
  scale: {
    color: {
      domain: [0, 5],
      range: ['hsl(152,80%,80%)', 'hsl(228,30%,40%)'],
      interpolate: interpolateHcl,
    },
  },
  style: {
    labelText: (d) => (d.r >= 10 && d.height === 0 ? `${d.data.name}` : ''),
  },
  axis: false,
  legend: false,
});

chart.render();

Options

layout

style

Composite graphic marks need to use different prefixes to distinguish graphic configurations.

• <label>: Prefix for data labels, for example: labelText sets the text of the label.