⚠️Attention:
Graphics Group and Node Group are totally different concepts with the same name Group.

• Graphics Group is the group for Graphics Shape;
• Node Group is the group for Nodes, which is related to the hierarchy and groups in the data.

What

Graphics Group (hereinafter referred to as Group) in G6 is similar to <g> tag in SVG : Group a container of a group of graphics. The transformations on a Group such as clipping, rotating, zooming, and translating will be applied to all the children of the Group. The properties like color and position will also be inherited by its children. Besides, Group can be nested for complicated objects.

In G6, all the nodes instances in a Graph is grouped by a Group named nodeGroup, all the edges instances are grouped by edgeGroup. And the visual level (zIndex) of nodeGroup is higher than edgeGroup, which means all the nodes will be drawed on the top of all the edges.

As shown in the figure below: The three nodes in (Left) are belong to the nodeGroup, the two edges are belong to the edgeGroup. The visual level (zIndex) of nodeGroup is higher than edgeGroup, so the three nodes are drawed on the top of the two edges. We reduce the opacity of the nodes in (Right) to clearly see the edges are drawed under the nodes.

(Left) Demonstration of the graphics Group of nodes and edges. (Right) Nodes with opacity.

When

Graphics Group is refered by Custom Node and Custom Edge. It is a mechanism to combine and manage the graphis shapes.

For example, there is a node A which has a group contains all the graphics shapes (a circle and a text shape) of A. Node B is a custom node which also has a group contains all the graphics shapes (a circle, a rect, and a text shape) of B.

How

The functions below will be used in Custom Node and Custom Edge.

Instantiating a Group

const group = new Group(cfgs);

Functions of Group

• addGroup(cfgs)

Add a new group to the group.

const subGroup = group.addGroup({
  id: 'rect',
});

• addShape(type, cfgs)

Add a shape to the group.

const keyShape = group.addShape('rect', {
  attrs: {
    stroke: 'red',
  },
});

Tips: The clip, transform, and other operations on a group will affect all the elements in the group.