This document introduces combo attribute configuration, with configuration locations as follows:

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

const graph = new Graph({
  // Other configurations...
  combo: {
    type: 'circle', // Combo type
    style: {}, // Combo style
    state: {}, // State style
    palette: {}, // Palette configuration
    animation: {}, // Animation configuration
  },
});

ComboOptions

Type

Specifies the combo type, name of built-in combo type or custom combo name. The default is circle (circular combo).

const graph = new Graph({
  // Other configurations...
  combo: {
    type: 'circle',
  },
});

Optional values are:

• circle: Circular Combo
• rect: Rectangular Combo

Style

Define the style of the combo here, including color, size, etc.

const graph = new Graph({
  // Other configurations...
  combo: {
    style: {},
  },
});

• key: The main graphic of the combo, representing the main shape of the combo, such as a circle, rectangle, etc.
• halo: A graphic that displays a halo effect around the main graphic.
• label: Text label, usually used to display the name or description of the combo.

The following style configurations will be explained in sequence according to atomic graphics:

Style When Expanded

Main graphic style when the combo is expanded

Cursor

Optional values are: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | all-scroll | col-resize | row-resize | n-resize | e-resize | s-resize | w-resize | ne-resize | nw-resize | se-resize | sw-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | zoom-in | zoom-out

Example:

const graph = new Graph({
  // Other configurations...
  combo: {
    style: {
      fill: '#1783FF', // Fill color
      stroke: '#000', // Stroke color
      lineWidth: 2, // Stroke width
    },
  },
});

The effect is as follows:

createGraph(
  {
    autoFit: 'center',
    data: {
      nodes: [{ id: 'node1', combo: 'combo1' }],
      combos: [{ id: 'combo1' }],
    },
    combo: {
      style: { fill: '#1783FF', stroke: '#000', lineWidth: 2 },
    },
  },
  { width: 240, height: 100 },
);

Style When Collapsed

Effective when collapsed is true

Example:

const graph = new Graph({
  // Other configurations...
  combo: {
    style: {
      collapsedFill: '#1783FF', // Fill color
      collapsedStroke: '#000', // Stroke color
      collapsedLineWidth: 2, // Stroke width
    },
  },
});

The effect is as follows:

createGraph(
  {
    autoFit: 'center',
    data: {
      nodes: [{ id: 'node1', combo: 'combo1' }],
      combos: [{ id: 'combo1', style: { collapsed: true } }],
    },
    combo: {
      style: { collapsedFill: '#1783FF', collapsedStroke: '#000', collapsedLineWidth: 2 },
    },
  },
  { width: 240, height: 100 },
);

Collapsed Marker Style

Effective when collapsedMarker is true

Example:

const graph = new Graph({
  // Other configurations...
  combo: {
    style: {
      collapsedMarkerFill: '#1783FF', // Fill color
      collapsedMarkerFontSize: 30, // Icon font size
    },
  },
});

The effect is as follows:

createGraph(
  {
    autoFit: 'center',
    data: {
      nodes: [
        { id: 'node1', combo: 'combo1' },
        { id: 'node2', combo: 'combo1' },
      ],
      combos: [{ id: 'combo1', style: { collapsed: true } }],
    },
    combo: {
      style: {
        collapsedMarkerFill: '#1783FF',
        collapsedMarkerFontSize: 30,
      },
    },
  },
  { width: 240, height: 100 },
);

Label Style

Labels are used to display the text information of the combo:

LabelPlacement

Optional values are: left | right | top | bottom | left-top | left-bottom | right-top | right-bottom | top-left | top-right | bottom-left | bottom-right | center | bottom

LabelMaxWidth

After enabling automatic line wrapping labelWordWrap, it will wrap if it exceeds this width:

• string: Indicates the maximum width defined as a percentage of the combo element width. For example, 50% means the label width does not exceed half of the combo width
• number: Indicates the maximum width defined in pixels. For example, 100 means the maximum width of the label is 100 pixels

For example, set multi-line label text:

{
  "labelWordWrap": true,
  "labelMaxWidth": 200,
  "labelMaxLines": 3
}

Example:

const graph = new Graph({
  // Other configurations
  combo: {
    style: {
      label: true, // Whether to display the combo label
      labelText: 'Combo Name', // Label text content
      labelFill: '#000', // Label text color
      labelFontSize: 12, // Label font size
      labelFontWeight: 'normal', // Label font weight
      labelPlacement: 'bottom', // Position of the label relative to the main graphic of the combo
    },
  },
});

The effect is as follows:

createGraph(
  {
    autoFit: 'center',
    data: {
      nodes: [{ id: 'node1', combo: 'combo1' }],
      combos: [
        {
          id: 'combo1',
          style: {
            label: true,
            labelText: 'Combo Name',
            labelFill: '#000',
            labelFontSize: 12,
            labelFontWeight: 'normal',
            labelPlacement: 'bottom',
          },
        },
      ],
    },
  },
  { width: 240, height: 100 },
);

Label Background Style

Label background is used to display the background of the combo label:

Example:

const graph = new Graph({
  // Other configurations...
  combo: {
    style: {
      labelBackground: true, // Whether to display the combo label background
      labelBackgroundFill: '#000', // Label background fill
      labelBackgroundRadius: 10, // Label background corner radius
      labelBackgroundFillOpacity: 0.5, // Label background fill color opacity
    },
  },
});

The effect is as follows:

createGraph(
  {
    autoFit: 'center',
    data: {
      nodes: [{ id: 'node1', combo: 'combo1' }],
      combos: [
        {
          id: 'combo1',
          style: {
            label: true,
            labelText: 'Combo Name',
            labelFill: '#000',
            labelFontSize: 12,
            labelFontWeight: 'normal',
            labelPlacement: 'bottom',
            labelBackground: true,
            labelBackgroundFill: '#000',
            labelBackgroundRadius: 10,
            labelBackgroundFillOpacity: 0.5,
          },
        },
      ],
    },
  },
  { width: 240, height: 100 },
);

Halo Style

PointerEvents

Optional values are: visible | visiblepainted | visiblestroke | non-transparent-pixel | visiblefill | visible | painted | fill | stroke | all | none | auto | inherit | initial | unset

Example:

const graph = new Graph({
  // Other configurations...
  combo: {
    style: {
      halo: true, // Whether to display the combo halo
      haloStroke: '#FF0000', // Combo halo stroke color
      haloLineWidth: 10, // Combo halo stroke width
    },
  },
});

The effect is as follows:

createGraph(
  {
    autoFit: 'center',
    data: {
      nodes: [{ id: 'node1', combo: 'combo1' }],
      combos: [{ id: 'combo1' }],
    },
    combo: {
      style: {
        halo: true,
        haloStroke: '#FF0000',
        haloLineWidth: 10,
      },
    },
  },
  { width: 240, height: 100 },
);

Icon Style

Example:

const graph = new Graph({
  // Other configurations...
  combo: {
    style: {
      iconText: 'Text', // Icon text
      iconFill: '#FF0000', // Icon text color
      iconFontSize: 14, // Icon text size
      iconFontWeight: 'bold', // Icon text weight
      iconFontStyle: 'italic', // Icon text style
    },
  },
});

The effect is as follows:

createGraph(
  {
    autoFit: 'center',
    data: {
      combos: [{ id: 'combo1' }],
    },
    combo: {
      style: {
        iconText: 'Text',
        iconFill: '#FF0000',
        iconFontSize: 14,
        iconFontWeight: 'bold',
        iconFontStyle: 'italic',
      },
    },
  },
  { width: 240, height: 100 },
);

State

In some interactive behaviors, such as clicking to select a combo or hovering to activate an edge, it is merely marking certain states on the element. To reflect these states in the visual space seen by the end user, we need to set different graphic element styles for different states to respond to changes in the element's state.

G6 provides several built-in states, including selected, highlight, active, inactive, and disabled. In addition, it also supports custom states to meet more specific needs. For each state, developers can define a set of style rules that will override the default styles of the element.

The data structure is as follows:

type ComboState = {
  [state: string]: ComboStyle;
};

For example, when the combo is in the focus state, you can add a stroke with a width of 3 and a color of orange.

const graph = new Graph({
  combo: {
    state: {
      focus: {
        lineWidth: 3, // Stroke width
        stroke: 'orange', // Stroke color
      },
    },
  },
});

The effect is as follows:

createGraph(
  {
    autoFit: 'center',
    data: {
      nodes: [{ id: 'node1', combo: 'combo1' }],
      combos: [{ id: 'combo1', states: ['focus'] }],
    },
    combo: {
      state: {
        focus: {
          lineWidth: 3,
          stroke: 'orange',
          fill: 'orange',
          fillOpacity: 0.2,
        },
      },
    },
  },
  { width: 200, height: 100 },
);

Animation

Defines the animation effects of the combo, supporting the following two configuration methods:

1. Turn off all animations for the combo

{
  "combo": {
    "animation": false
  }
}

2. Configure stage animations

Stage animations refer to the animation effects of the combo when entering the canvas, updating, and leaving the canvas. The currently supported stages include:

• enter: Animation when the combo enters the canvas
• update: Animation when the combo is updated
• exit: Animation when the combo leaves the canvas
• show: Animation when the combo is displayed from a hidden state
• hide: Animation when the combo is hidden
• collapse: Animation when the combo is collapsed
• expand: Animation when the combo is expanded

You can refer to Animation Paradigm to use animation syntax to configure the combo, such as:

{
  "combo": {
    "animation": {
      "update": [
        {
          "fields": ["x", "y"], // Only animate the x and y attributes during update
          "duration": 1000, // Animation duration
          "easing": "linear" // Easing function
        }
      ],
  }
}

You can also use built-in animation effects:

{
  "combo": {
    "animation": {
      "enter": "fade", // Use fade animation
      "update": "translate", // Use translate animation
      "exit": "fade" // Use fade animation
    }
  }
}

You can pass in false to turn off animations for specific stages:

{
  "combo": {
    "animation": {
      "enter": false // Turn off combo entrance animation
    }
  }
}

Palette

Defines the palette of the combo, which is a predefined pool of combo colors, and assigns colors based on rules, mapping colors to the fill attribute.

For the definition of the palette, please refer to Palette.

For example, assign combo colors to a set of data based on the category field, so that combos of the same category have the same color:

{
  "combo": {
    "palette": {
      "type": "group",
      "field": "category",
      "color": ["#1783FF", "#F08F56", "#D580FF", "#00C9C9", "#7863FF"]
    }
  }
}

The effect is as follows:

createGraph(
  {
    data: {
      combos: new Array(8)
        .fill(0)
        .map((_, i) => ({ id: `combo-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })),
    },
    layout: { type: 'grid', cols: 8 },
    combo: {
      style: { fillOpacity: 0.4 },
      palette: {
        type: 'group',
        field: 'category',
        color: ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF'],
      },
    },
  },
  { width: 600, height: 100 },
);

You can also use the default configuration:

{
  "combo": {
    "palette": "tableau" // tableau is the palette name, and colors are assigned based on ID by default
  }
}

The effect is as follows:

createGraph(
  {
    data: {
      combos: new Array(8)
        .fill(0)
        .map((_, i) => ({ id: `combo-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })),
    },
    layout: { type: 'grid', cols: 8 },
    combo: {
      style: { fillOpacity: 0.4 },
      palette: 'tableau',
    },
  },
  { width: 600, height: 100 },
);