Chart primitives

Layouts & specialized

Interactions

SVG utilities

Data utilities

Umbrella package

@vx/vx

@vx/hierarchy

Many datasets are intrinsically hierarchical. This package contains several react components for visualizing hierarchical data and largely mirrors d3-hierarchy.

Many components take the same input hierarchy data root node as defined in as specified in the d3-hierarchy module. For convenience, this package also exports the d3-hierarchyutility to generate this format.

// equivalent to `import { hierarchy } from 'd3-hierarchy';`
import { hierarchy } from '@vx/hierarchy';

const root = hierarchy({
  name: 'root',
  children: [
    { name: 'child #1' },
    {
      name: 'child #2',
      children: [{ name: 'grandchild #1' }, { name: 'grandchild #2' }, { name: 'grandchild #3' }],
    },
  ],
});

Installation

npm install --save @vx/hierarchy

Examples

Pack

<Hierarchy.Pack />

Treemap

<Hierarchy.Treemap />

Dendrograms

<Hierarchy.Cluster /> + <Shape.LinkVertical />

Link Types

<Shape.Link* />

Trees

<Hierarchy.Tree /> + <Shape.LinkHorizontal />

APIs

#<Cluster />

# Cluster.rootHierarchyNode<Datum>required

The root hierarchy node from which to derive the treemap layout.

# Cluster.children((pack: HierarchyPointNode<Datum>) => ReactNode) | undefinedoptional

Render override function which is passed the computed cluster layout data.

# Cluster.classNamestring | undefinedoptional

className applied to the g element container.

# Cluster.leftnumber | undefinedoptional

left offset applied to the g element container.

# Cluster.linkComponentFunctionComponent<LinkComponentProps<Datum>> | ComponentClass<LinkComponentProps<Datum>, any> | undefinedoptional

Component which renders a single cluster link, passed the link object.

# Cluster.nodeComponentFunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>, any> | undefinedoptional

Component which renders a single cluster node, passed the node object.

# Cluster.nodeSize[number, number] | undefinedoptional

Sets this cluster layout’s node size to the specified two-element array of numbers [width, height]. If unset, layout size is used instead. When a node size is specified, the root node is always positioned at ⟨0, 0⟩.

# Cluster.separation((a: HierarchyPointNode<Datum>, b: HierarchyPointNode<Datum>) => number) | undefinedoptional

Sets the separation accessor, used to separate neighboring leaves.

# Cluster.size[number, number] | undefinedoptional

Sets this cluster layout’s size to the specified two-element array of numbers [width, height]. This is an arbitrary coordinate system, e.g., for a radial layout, a size of [360, radius] corresponds to a breadth of 360° and a depth of radius.

# Cluster.topnumber | undefinedoptional

top offset applied to the g element container.

#<Pack />

# Pack.rootHierarchyNode<Datum>required

The root hierarchy node from which to derive the pack layout.

# Pack.children((pack: HierarchyCircularNode<Datum>) => ReactNode) | undefinedoptional

Render override function which is passed the computed pack layout data.

# Pack.classNamestring | undefinedoptional

className applied to the g element container.

# Pack.leftnumber | undefinedoptional

left offset applied to the g element container.

# Pack.nodeComponentFunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>, any> | undefinedoptional

Component which renders a single pack node, passed the node object.

# Pack.paddingnumber | undefinedoptional

Sets this pack layout’s padding accessor to the specified number or function, which determines approximate separation of nodes in the resulting pack.

# Pack.radius((node: HierarchyNode<Datum>) => number) | undefinedoptional

Radius accessor function which defines the radius of each leaf node. If the radius accessor is null, the radius of each leaf circle is derived from the leaf node.value, and scaled proportionally to fit within the defined layout size.

# Pack.size[number, number] | undefinedoptional

Sets the pack layout size to the defined width, height.

# Pack.topnumber | undefinedoptional

top offset applied to the g element container.

#<Partition />

# Partition.rootHierarchyNode<Datum>required

The root hierarchy node from which to derive the treemap layout.

# Partition.children((pack: HierarchyRectangularNode<Datum>) => ReactNode) | undefinedoptional

Render override function which is passed the computed partition layout data.

# Partition.classNamestring | undefinedoptional

className applied to the g element container.

# Partition.leftnumber | undefinedoptional

left offset applied to the g element container.

# Partition.nodeComponentFunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>, any> | undefinedoptional

Component which renders a single cluster node, passed the node object.

# Partition.paddingnumber | undefinedoptional

Sets padding, used to separate a node’s adjacent children.

# Partition.roundboolean | undefinedoptional

Whether partition layout rounds values.

# Partition.size[number, number] | undefinedoptional

Sets this partition layout’s size to the specified two-element array of numbers [width, height] .

# Partition.topnumber | undefinedoptional

top offset applied to the g element container.

#<Tree />

# Tree.rootHierarchyNode<Datum>required

The root hierarchy node from which to derive the tree layout.

# Tree.children((pack: HierarchyPointNode<Datum>) => ReactNode) | undefinedoptional

Render override function which is passed the computed cluster layout data.

# Tree.classNamestring | undefinedoptional

className applied to the g element container.

# Tree.leftnumber | undefinedoptional

left offset applied to the g element container.

# Tree.linkComponentFunctionComponent<LinkComponentProps<Datum>> | ComponentClass<LinkComponentProps<Datum>, any> | undefinedoptional

Component which renders a single cluster link, passed the link object.

# Tree.nodeComponentFunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>, any> | undefinedoptional

Component which renders a single cluster node, passed the node object.

# Tree.nodeSize[number, number] | undefinedoptional

Sets this tree layout’s node size to the specified two-element array of numbers [width, height]. If unset, layout size is used instead. When a node size is specified, the root node is always positioned at ⟨0, 0⟩.

# Tree.separation((a: HierarchyPointNode<Datum>, b: HierarchyPointNode<Datum>) => number) | undefinedoptional

Sets the layout's separation accessor used to determine the separation of neighboring nodes. See https://github.com/d3/d3-hierarchy/blob/master/README.md#tree_separation for more.

# Tree.size[number, number] | undefinedoptional

Sets this tree layout’s size to the specified two-element array of numbers [width, height]. This is an arbitrary coordinate system, e.g., for a radial layout, a size of [360, radius] corresponds to a breadth of 360° and a depth of radius.

# Tree.topnumber | undefinedoptional

top offset applied to the g element container.

#<Treemap />

# Treemap.rootHierarchyNode<Datum>required

The root hierarchy node from which to derive the treemap layout.

# Treemap.children((pack: HierarchyRectangularNode<Datum>) => ReactNode) | undefinedoptional

Render override function which is passed the computed pack layout data.

# Treemap.classNamestring | undefinedoptional

className applied to the g element container.

# Treemap.leftnumber | undefinedoptional

left offset applied to the g element container.

# Treemap.nodeComponentFunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>, any> | undefinedoptional

Component which renders a single pack node, passed the node object.

# Treemap.paddingnumber | ((node: HierarchyRectangularNode<Datum>) => number) | undefinedoptional

Sets both inner and outer padding to the specified number or accessor.

# Treemap.paddingBottomnumber | ((node: HierarchyRectangularNode<Datum>) => number) | undefinedoptional

Sets padding used to spearate the bottom edge of a node from its children.

# Treemap.paddingInnernumber | ((node: HierarchyRectangularNode<Datum>) => number) | undefinedoptional

Sets padding used to separate a node’s adjacent children.

# Treemap.paddingLeftnumber | ((node: HierarchyRectangularNode<Datum>) => number) | undefinedoptional

Sets padding used to spearate the left edge of a node from its children.

# Treemap.paddingOuternumber | ((node: HierarchyRectangularNode<Datum>) => number) | undefinedoptional

Sets padding used to spearate a node from its children.

# Treemap.paddingRightnumber | ((node: HierarchyRectangularNode<Datum>) => number) | undefinedoptional

Sets padding used to spearate the right edge of a node from its children.

# Treemap.paddingTopnumber | ((node: HierarchyRectangularNode<Datum>) => number) | undefinedoptional

Sets padding used to spearate the top edge of a node from its children.

# Treemap.roundboolean | undefinedoptional

Whether to round treemap values.

# Treemap.size[number, number] | undefinedoptional

Sets this treemap layout’s size to the specified two-element array of numbers width, height

# Treemap.tileTileMethod<Datum> | undefinedoptional

Sets the treemap tiling method to the specified function (exported from this package). See https://github.com/d3/d3-hierarchy#treemap for more.

# Treemap.topnumber | undefinedoptional

top offset applied to the g element container.