@visx/group

Grouping SVG Elements

This feature allows you to group multiple SVG elements together and apply transformations like translation to the entire group. In this example, two circles are grouped together and the entire group is translated 100 units down and 100 units to the right.

import { Group } from '@visx/group';
import { Circle } from '@visx/shape';

function MyComponent() {
  return (
    <svg width={500} height={500}>
      <Group top={100} left={100}>
        <Circle cx={50} cy={50} r={20} fill="blue" />
        <Circle cx={150} cy={50} r={20} fill="red" />
      </Group>
    </svg>
  );
}

Nested Groups

This feature allows you to nest groups within other groups, enabling complex transformations and hierarchical structuring of SVG elements. In this example, a blue circle is grouped and translated, and within that group, another group containing a red circle is further translated.

import { Group } from '@visx/group';
import { Circle } from '@visx/shape';

function MyComponent() {
  return (
    <svg width={500} height={500}>
      <Group top={50} left={50}>
        <Circle cx={50} cy={50} r={20} fill="blue" />
        <Group top={50} left={50}>
          <Circle cx={50} cy={50} r={20} fill="red" />
        </Group>
      </Group>
    </svg>
  );
}