This article introduces the configuration of combo attributes, with the configuration located as follows:

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

const graph = new Graph({
  combo: {
    type: 'circle',
    style: {},
    state: {},
    palette: {},
    animation: {},
  },
});

Type Attribute (type)

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

For more built-in combo types, see the Combo Registry.

Style Attributes (style)

Defines the style of the combo, including color, size, etc.

To understand the composition of a combo, please read Core Concepts - Elements - Combo.

The following style configurations will be explained in terms of atomic styles:

Expand Style (key)

Collapsed Style (collapsed)

Collapsed Marker Style (collapsedMarker)

Label Style (label)

State Attributes (state)

In some interactive behaviors, such as clicking to select a node or hovering to activate an edge, a certain state is merely flagged for that element. To reflect these states in the visual space seen by the end user, we need to set different graphical element styles for different states to respond to changes in the state of the graphical element.

G6 provides several built-in states, including selected, highlighted, active, inactive, and disabled. Additionally, it 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 elements.

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

{
  "combo": {
    "state": {
      "focus": {
        "lineWidth": 3,
        "stroke": "orange",
        "fill": "orange",
        "fillOpacity": 0.2
      }
    }
  }
}

The effect is shown in the figure below:

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 Attributes (animation)

Defines the animation effect of the combo, and supports the following two configuration methods:

1. disable all animation of the combo

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

2. Configuring stage animation

Stage animation is the animation effect of a combo when it enters the graph, updates, and leaves the graph. Currently supported stages include:

• enter: animation when a combo enters the graph
• update: animation when the combo is updated.
• exit: animation when the combo leaves the graph
• show: animation when the combo is shown from 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 configure the combo using the animation syntax, e.g.:

{
  "combo": {
    "animation": {
      "update": [
        {
          "fields": ["x", "y"], // update animates only the x and y attributes
          "duration": 1000, // duration of the animation
          "easing": "linear" // the easing function
        }
      ]
    }
  }
}

Built-in animation effects can also be used:

{
  "combo": {
    "animation": {
      "enter": "fade", // use a fade animation
      "update": "translate", // Use a panning animation.
      "exit": "fade" // Use the fade animation.
    }
  }
}

You can pass in false to turn off animation for a particular stage:

{
  "combo": {
    "animation": {
      "enter": false // Turn off the combo entry animation.
    }
  }
}

Palette Attributes (palette)

Define the palette for combos, i.e., a predefined combo color pool, and allocate colors according to rules, mapping the colors to the fill property.

For the definition of the palette, please refer to Core Concepts - Palette.

For example, allocate combo colors for a set of data according to 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 shown in the figure below:

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 name of the palette, by default colors are assigned based on ID
  }
}

The effect is shown in the figure below:

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 },
);