g6/packages/site/docs/manual/middle/elements/combos/built-in/rect.en.md

title	order
Rect	2

Built-in Rect Combo has the default style as below, the label is drawed on the left top inside. Demo

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 'rect' 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: 'rect', // 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: 'rect', // The tyep of the combo
      ... // Other configurations
    },
    ... // Other combos
  ]
};

Property

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

Name	Description	Type	Remark
size	The MINIMUM diameter of the combo (not for fixing the size)	Number / Array	When it is an array, the first element will take effect
fixSize	Fix the size of the Combo	number / number[]	If 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
fixCollapseSize	Fix the size of the collapsed Combo	number / number[]	If 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 ｜
style	The default style of rect combo	Object	Refer to the style
label	The text of the label	String
labelCfg	The configurations of the label	Object	Refer to the labelCfg
stateStyles	The styles in different states	Object	Refer to Configure Styles for State

style

The Combo Common Styles are available for Rect 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.

const data = {
  combos: [
    {
      label: 'combo_rect',
      type: 'rect',
      label: 'rect',
    },
  ],
};
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: 'rect',  // 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. Supported by v4.7.17 and later versions And rect type combo has a special value 'top-center' for labelCfg.position, to place the label text on the top center of the rect. Base on the code in style section, we add labelCfg to defaultCombo.

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: -12,
      style: {
        fill: '#bae637',
        fontSize: 15,
        // ... The style of the label
      },
    },
  },
});
// ...