Circle

4 min read
Built-in Circle Combo has the default style as below, the label is drawed on the center of it. Demo
img

Usage

As stated in Built-in Combos , there are three methods to configure combos: Configure combos globally when instantiating a Graph; Configure combos in their data; Configure combos by graph.combo(comboFn). Their priorities are:

graph.combo(comboFn > Configure in data > Configure globally

⚠️ Attention: Expect for id, parentId, and label which should be assigned to every single combo data, the other configurations in The Common Property and in each combo type (refer to doc of each combo type) support to be assigned by the three ways.
⚠️ Attention: Must set the groupByTypes to false when instantiating the graph, which will result in rendering result with reasonable visual zIndex for combos.

1 Global Configure When Instantiating a Graph

Assign type to 'circle' in the defaultCombo object when instantiating a Graph:

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
  groupByTypes: false,
  defaultCombo: {
    type: 'circle', // The type of the combo
    // ... Other configuraltions
  },
});

2 Configure in the Data

To configure different combo with different properties, you can write the properties into the combo data.

const data = {
  nodes: [
    ... // nodes
  ],
  edges: [
    ... // edges
  ],
  combos: [
    {
      id: 'combo1',
      type: 'circle', // The tyep of the combo
      ... // Other configurations
    },
    ... // Other combos
  ]
};

Property

The Combo Common Properties are available for Circle combo, some special properties are shown below. The property with Object type will be described after the table:

NameDescriptionTypeRemark
sizeThe MINIMUM diameter of the combo (not for fixing the size)number / number[]When it is an array, the first element will take effect
fixSizeFix the size of the combonumberIf it is not assigned, the rendering size of the combo depends on the sizes and distribution of its children items. If the fixSize is assigned but the fixCollapseSize is not, the size of the collapsed combo will still be fixSize
fixCollapseSizeFix the size of the collapsed combonumberIf it is not assigned and the fixSize is assigned, the size of the collapsed Combo is fixSize; and if fixCollapseSize and fixSize are both not assigned, the size of the collapsed Combo is size
styleThe default style of circle comboObjectRefer to the style
labelThe text of the labelString
labelCfgThe configurations of the labelObjectRefer to the labelCfg
stateStylesThe styles in different statesObjectRefer to Configure Styles for State

style

The Combo Common Styles are available for Circle combo. style is an object to configure the filling color, stroke, and other styles. The following code shows how to configure the style globally when instantiating a Graph.
img

const data = {
  combos: [
    {
      label: 'combo_circle',
      type: 'circle',
      label: 'Circle',
    },
  ],
};
const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
  groupByTypes: false,
  defaultCombo: {
    // type: 'circle',  // The type has been assigned in the data, we do not have to define it any more
    style: {
      fill: '#bae637',
      stroke: '#eaff8f',
      lineWidth: 5,
    },
  },
});
graph.data(data);
graph.render();

labelCfg

labelCfg is an object to configure the label of the combo. The Combo Common Label Configurations are available. Base on the code in style section, we add labelCfg to defaultCombo.
img

const data = {
  // ... data
};
const graph = new G6.Graph({
  // ... Other configurations for graph
  // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos
  groupByTypes: false,
  defaultCombo: {
    // ... Other properties for combos
    labelCfg: {
      position: 'bottom',
      refX: 5,
      style: {
        fill: '#bae637',
        fontSize: 15,
        // ... The style of the label
      },
    },
  },
});
// ...