@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

Components

APIs

#<Cluster />

# Cluster.rootHierarchyNode<Datum>required

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

# Cluster.children(pack: HierarchyPointNode<Datum>) => ReactNodeoptional

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

# Cluster.classNamestringoptional

className applied to the g element container.

# Cluster.leftnumberoptional

left offset applied to the g element container.

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

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

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

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

# Cluster.nodeSize[number, number]optional

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>) => numberoptional

Sets the separation accessor, used to separate neighboring leaves.

# Cluster.size[number, number]optional

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.topnumberoptional

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>) => ReactNodeoptional

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

# Pack.classNamestringoptional

className applied to the g element container.

# Pack.leftnumberoptional

left offset applied to the g element container.

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

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

# Pack.paddingnumberoptional

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>) => numberoptional

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]optional

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

# Pack.topnumberoptional

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>) => ReactNodeoptional

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

# Partition.classNamestringoptional

className applied to the g element container.

# Partition.leftnumberoptional

left offset applied to the g element container.

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

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

# Partition.paddingnumberoptional

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

# Partition.roundbooleanoptional

Whether partition layout rounds values.

# Partition.size[number, number]optional

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

# Partition.topnumberoptional

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>) => ReactNodeoptional

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

# Tree.classNamestringoptional

className applied to the g element container.

# Tree.leftnumberoptional

left offset applied to the g element container.

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

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

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

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

# Tree.nodeSize[number, number]optional

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>) => numberoptional

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]optional

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.topnumberoptional

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>) => ReactNodeoptional

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

# Treemap.classNamestringoptional

className applied to the g element container.

# Treemap.leftnumberoptional

left offset applied to the g element container.

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

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

# Treemap.paddingNumerOrNumberAccessor<Datum>optional

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

# Treemap.paddingBottomNumerOrNumberAccessor<Datum>optional

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

# Treemap.paddingInnerNumerOrNumberAccessor<Datum>optional

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

# Treemap.paddingLeftNumerOrNumberAccessor<Datum>optional

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

# Treemap.paddingOuterNumerOrNumberAccessor<Datum>optional

Sets padding used to spearate a node from its children.

# Treemap.paddingRightNumerOrNumberAccessor<Datum>optional

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

# Treemap.paddingTopNumerOrNumberAccessor<Datum>optional

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

# Treemap.roundbooleanoptional

Whether to round treemap values.

# Treemap.size[number, number]optional

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

# Treemap.tileTileMethod<Datum>optional

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

# Treemap.topnumberoptional

top offset applied to the g element container.