Graphics Group

7 min read
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. For more information about Group, please refer to Graphics Group document.

Get group of item

// Find the graphics group of the item
const group = item.getContainer();

// equal to
const group = item.get('group');

Methods

group.addGroup(cfg)

Add a new group to the group.

Parameters

NameTypeDescription
cfgObjectNot required. It is the configurations of the group

The cfg above is not required, and it contains:

NameTypeDescription
idStringThe unique id of this group
nameStringThe name of the shape which can be not unique. It is required for each shape in G6 3.3. Besides, name can be used for searching this shape, e.g. const shape = group.find(element => element.get('name') === 'shape-name'). The usage of find can be found at find(fn)
visibleBooleanWhether the group is visible
captureBooleanWhether the group is capturable
draggableBooleanWhether the group is allowed to response dragstart, drag, and dragend events. E.g. when user add a group into a custom node with draggable: true, the group will response the dragging events on the node, and the 'drag-node' in the modes of the graph instance will take effect on the group
zIndexNumberThe visual index of the shape, similar to z-index of DOM. It is not required. group.sort() will sort the visual index of the shapes inside the group according to their zIndex

Usage

// No configurations
group.addGroup();

// Configured
group.addGroup({
  id: 'groupId',
  draggable: true,
  // other configurations
});

group.addShape(type, cfgs)

Add a new shape into the group
⚠️Attention: the clip and transform operations will affect all the shapes in the group. The graphics and their properties are introduced in Shape Doc.

Parameters

NameTypeDescription
typeStringThe type of the shape. Options: 'rect', 'circle', 'fan', 'ellipse', 'marker', 'image', and so on. Please refer to Graphics Shape Properties document
cfgObjectThe configurations of the shape.

The cfg above contains:

NameTypeDescription
attrsObjectThe style configurations for the shape. e.g. {x: 0, y: 10, fill: '#0f0'}
nameStringThe name of the shape which can be not unique. It is required for each shape in G6 3.3. Besides, name can be used for searching this shape, e.g. const shape = group.find(element => element.get('name') === 'shape-name'). The usage of find can be found at find(fn)
visibleBooleanWhether the shape is visible
captureBooleanWhether the shape is capturable by mouse events
draggableBooleanWhether the shape is allowed to response dragstart, drag, and dragend events. E.g. when user add a shape into a custom node with draggable: true, the shape will response the dragging events on the node, and the 'drag-node' in the modes of the graph instance will take effect
zIndexNumberThe visual index of the shape, similar to z-index of DOM. It is not required. group.sort() will sort the visual index of the shapes inside the group according to their zIndex

Usage

group.addShape('rect', {
  attrs: {
    x: 0, // required
    y: 0, // required
    fill: 'red',
    shadowOffsetX: 10,
    shadowOffsetY: 10,
    shadowColor: 'blue',
    shadowBlur: 10,
    opacity: 0.8,
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'rect-shape',
  zIndex: 1,
});

group.contain(child)

Whether the group contains the child.
The type of the return value: Boolean.

Parameters

NameTypeDescription
childGroup / ShapeA sub group or an instance of shape.

Usage

const has = group.contain(child);

group.find(fn)

Find the first element that matches the rule.

Parameters

NameTypeDescription
fnFunctionCustomized callback function.

Usage

const child = group.find(function (item) {
  return item.attr('fill') === 'red'; // Find the first graphics filled with red
});

group.findById(id)

Find the element by its id.
The type of the return value: Object。

Parameters

NameTypeDescription
idStringThe id of the group.

Usage

const group1 = group.findById('group1');

group.findAll(fn)

Find all the elements that match the rule.
The type of the return value: [ Object ]

Parameters

NameTypeDescription
fnFunctionCustomized callback function.

Usage

const children = group.findAll(function (item) {
  return item.get('id') < 10; // get all the elements with the id smaller than 10
});

group.getShape(x,y)

Get the top shape which is on (x, y).
The type of the return value: Object

Parameters

NameTypeDescription
xnumberx coordinate
ynumbery coordinate

Usage

// Get the top element on (10, 30)
const element = group.getShape(10, 30);

group.getFirst()

Get the first element of the group.
The type of the return value: Object

Usage

const child = group.getFirst();

// Equal to
const childrens = group.get('children');
const child = childrens[0];

group.getLast()

Get the last element of the group.
The type of the return value: Object

Usage

const child = group.getLast();

// Equal to
const childrens = group.get('children');
const child = childrens[childrens.length - 1];

group.getChildByIndex(index)

Get the index-th child of the group started from 0.
The type of the return value: Object

Parameters

NameTypeDescription
indexnumberThe index of the child. 0 by default.

Usage

const child = group.getChildByIndex(2);

group.removeChild(child)

Remove a group or a graphics from the group.

Parameters

NameTypeDescription
childGroup / ShapeA sub group or an instance of Shape.

Usage

group.removeChild(child);

group.sort()

Sort method.
In general, it is called for ordering the children of the group.

Typical scenerio: we set index for each shape when add shape by group.addShape(). After adding, sort the shapes by calling group.sort().

Usage

group.sort();

group.clear()

Clear all the children in the group.

Usage

group.clear();