@visx/group

What is @visx/group?

@visx/group is a part of the VisX library, which is a collection of reusable low-level visualization components. The @visx/group package specifically provides a way to group SVG elements together, making it easier to manage and transform collections of SVG elements as a single unit.

What are @visx/group's main functionalities?

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>
  );
}

Other packages similar to @visx/group

d3-selection

The d3-selection package is part of the D3.js library and provides methods for selecting and manipulating DOM elements. It allows for grouping of SVG elements and applying transformations, similar to @visx/group. However, D3.js is a more comprehensive library with a steeper learning curve, offering a wide range of data visualization tools beyond just grouping elements.

react-konva

react-konva is a React wrapper for the Konva.js library, which is used for creating 2D canvas graphics. It allows for grouping of shapes and applying transformations, similar to @visx/group. While react-konva is more focused on canvas elements rather than SVG, it provides a similar grouping functionality with additional features for animations and interactions.

README

@visx/group

<Group /> provides a simplified API for SVG <g /> elements, which are containers for other SVG objects. You may pass in a top and left margin (instead of transform={translate(...)}) and a className.

Installation

npm install --save @visx/group