Combo Operation

4 min read

graph.node(nodeFn)

Set the style and other configurations for each node.

⚠️Attention: this funcion must be called before graph.render(). It does not take effect otherwise.

Parameters

NameTypeRequiredDescription
nodeFnFunctiontrueReturn the configurations for each node.

Usage

graph.node((node) => {
  return {
    id: node.id,
    type: 'rect',
    style: {
      fill: 'blue',
    },
  };
});

graph.data(data);
graph.render();

graph.edge(edgeFn)

Set the style and other configurations for each edge.

⚠️Attention: this funcion must be called before graph.render(). It does not take effect otherwise.

Parameters

NameTypeRequiredDescription
edgeFnFunctiontrueReturn the configurations for each edge.

Usage

graph.edge((edge) => {
  return {
    id: edge.id,
    type: 'cubic-horizontal',
    style: {
      stroke: 'green',
    },
  };
});

graph.data(data);
graph.render();

graph.combo(comboFn)

Set the style and other configurations for each combo.

⚠️Attention: this funcion must be called before graph.render(). It does not take effect otherwise.

Parameters

NameTypeRequiredDescription
comboFnFunctiontrueReturn the configurations for each combo.

Usage

graph.combo((combo) => {
  return {
    id: combo.id,
    type: 'rect',
    style: {
      stroke: 'green',
    },
  };
});

graph.data(data);
graph.render();

graph.collapseCombo(combo)

Collapse a Combo.

Parameters

NameTypeRequiredDescription
combostring / ICombotrueThe ID of the combo or the combo item to be collapsed

Usage

graph.collapseCombo('combo1')

graph.expandCombo(combo)

Expand a Combo.

Parameters

NameTypeRequiredDescription
combostring / ICombotrueThe ID of the combo or the combo item to be expanded

Usage

graph.expandCombo('combo1')

graph.collapseExpandCombo(combo)

Expand the combo if it is collapsed. Collapse the combo if it is expanded.

Parameters

NameTypeRequiredDescription
combostring / ICombotrueThe ID of the combo or the combo item to be collapsed or expanded

Usage

graph.collapseExpandCombo('combo1')

graph.createCombo(combo, elements)

Create a new combo with existing nodes or combos to be its children.

Parameters

NameTypeRequiredDescription
combostring / ICombotrueThe ID or the configuration of the combo to be created
elementsstring[]The IDs of the existing nodes or combos to be the children of the newly created combo

Usage

// The first parameter is the id of the combo to be created
graph.createCombo('combo1', ['node1', 'node2', 'combo2'])

// The first parameter is the configuration of the combo to be created
graph.createCombo({
  id: 'combo1',
  style: {
    fill: '#f00'
  }
}, ['node1', 'node2', 'combo2'])

graph.uncombo(combo)

Ungroup the combo, which deletes the combo itself, and appends the children of the combo to its parent(if it exists).

Parameters

NameTypeRequiredDescription
combostring / ICombotrueThe ID of the item or the combo item to be updated

Usage

graph.uncombo('combo1')

Comparison for Combo and Hull

combo-hull