Circle

Overview

The circular combo wraps child nodes or child combos with a circular boundary, suitable for representing equal or non-hierarchical group relationships.

Applicable scenarios:

Suitable for representing node groups without a clear hierarchical relationship. The circular combo can reflect the equality of members, such as user groups in social networks or decentralized team structures (highlighting collaboration).

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' } },
    behaviors: ['drag-element', 'collapse-expand'],
    plugins: ['grid-line'],
    animation: true,
  },
  { width: 600, height: 400 },
  (gui, graph) => {
    gui.add({ type: 'circle' }, 'type').disable();
  },
);

设置 combo.type 为 circle 以使用圆形组合。

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 shows the distribution of interest group members:

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

const graph = new Graph({
  container: 'container',
  width: 600,
  height: 600,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', combo: 'combo2', style: { x: 150, y: 150 } },
      { id: 'node2', combo: 'combo2', style: { x: 200, y: 150 } },
      { id: 'node3', combo: 'combo3', style: { x: 300, y: 150 } },
      { id: 'node4', combo: 'combo3', style: { x: 350, y: 150 } },
      { id: 'node5', combo: 'combo4', style: { x: 230, y: 300 } },
      { id: 'node6', combo: 'combo4', style: { x: 280, y: 300 } },
    ],
    combos: [
      { id: 'combo1', style: { labelText: '兴趣小组' } },
      { id: 'combo2', combo: 'combo1', style: { labelText: '书法' } },
      { id: 'combo3', combo: 'combo1', style: { labelText: '影视' } },
      { id: 'combo4', combo: 'combo1', style: { labelText: '游戏' } },
    ],
  },
  node: {
    style: {
      labelText: (d) => d.id,
    },
  },
  behaviors: ['drag-element', 'collapse-expand'],
  animation: true,
});

graph.render();

Overview

The circular combo wraps child nodes or child combos with a circular boundary, suitable for representing equal or non-hierarchical group relationships.

Applicable scenarios:

Suitable for representing node groups without a clear hierarchical relationship. The circular combo can reflect the equality of members, such as user groups in social networks or decentralized team structures (highlighting collaboration).

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' } },
    behaviors: ['drag-element', 'collapse-expand'],
    plugins: ['grid-line'],
    animation: true,
  },
  { width: 600, height: 400 },
  (gui, graph) => {
    gui.add({ type: 'circle' }, 'type').disable();
  },
);

设置 combo.type 为 circle 以使用圆形组合。

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 shows the distribution of interest group members:

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

const graph = new Graph({
  container: 'container',
  width: 600,
  height: 600,
  autoFit: 'center',
  data: {
    nodes: [
      { id: 'node1', combo: 'combo2', style: { x: 150, y: 150 } },
      { id: 'node2', combo: 'combo2', style: { x: 200, y: 150 } },
      { id: 'node3', combo: 'combo3', style: { x: 300, y: 150 } },
      { id: 'node4', combo: 'combo3', style: { x: 350, y: 150 } },
      { id: 'node5', combo: 'combo4', style: { x: 230, y: 300 } },
      { id: 'node6', combo: 'combo4', style: { x: 280, y: 300 } },
    ],
    combos: [
      { id: 'combo1', style: { labelText: '兴趣小组' } },
      { id: 'combo2', combo: 'combo1', style: { labelText: '书法' } },
      { id: 'combo3', combo: 'combo1', style: { labelText: '影视' } },
      { id: 'combo4', combo: 'combo1', style: { labelText: '游戏' } },
    ],
  },
  node: {
    style: {
      labelText: (d) => d.id,
    },
  },
  behaviors: ['drag-element', 'collapse-expand'],
  animation: true,
});

graph.render();

G6

Circle

G6

Circle

Overview

Online Experience

Style Configuration

Example

Overview

Online Experience

Style Configuration

Example