@visx/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 '@visx/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 @visx/hierarchy

Examples

APIs

#<Cluster />

# rootHierarchyNode<Datum>required

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

# children((pack: HierarchyPointNode<Datum>) => ReactNode) | undefined

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

# classNamestring | undefined

className applied to the g element container.

# leftnumber | undefined

left offset applied to the g element container.

# linkComponentFunctionComponent<LinkComponentProps<Datum>> | ComponentClass<LinkComponentProps<Datum>, any> | undefined

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

# nodeComponentFunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>, any> | undefined

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

# nodeSize[number, number] | undefined

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

# separation((a: HierarchyPointNode<Datum>, b: HierarchyPointNode<Datum>) => number) | undefined

Sets the separation accessor, used to separate neighboring leaves.

# size[number, number] | undefined

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.

# topnumber | undefined

top offset applied to the g element container.

#<Pack />

# rootHierarchyNode<Datum>required

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

# children((pack: HierarchyCircularNode<Datum>) => ReactNode) | undefined

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

# classNamestring | undefined

className applied to the g element container.

# leftnumber | undefined

left offset applied to the g element container.

# nodeComponentFunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>, any> | undefined

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

# paddingnumber | undefined

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

# radius((node: HierarchyNode<Datum>) => number) | undefined

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.

# size[number, number] | undefined

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

# topnumber | undefined

top offset applied to the g element container.

#<Partition />

# rootHierarchyNode<Datum>required

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

# children((pack: HierarchyRectangularNode<Datum>) => ReactNode) | undefined

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

# classNamestring | undefined

className applied to the g element container.

# leftnumber | undefined

left offset applied to the g element container.

# nodeComponentFunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>, any> | undefined

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

# paddingnumber | undefined

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

# roundboolean | undefined

Whether partition layout rounds values.

# size[number, number] | undefined

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

# topnumber | undefined

top offset applied to the g element container.

#<Tree />

# rootHierarchyNode<Datum>required

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

# children((pack: HierarchyPointNode<Datum>) => ReactNode) | undefined

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

# classNamestring | undefined

className applied to the g element container.

# leftnumber | undefined

left offset applied to the g element container.

# linkComponentFunctionComponent<LinkComponentProps<Datum>> | ComponentClass<LinkComponentProps<Datum>, any> | undefined

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

# nodeComponentFunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>, any> | undefined

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

# nodeSize[number, number] | undefined

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

# separation((a: HierarchyPointNode<Datum>, b: HierarchyPointNode<Datum>) => number) | undefined

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.

# size[number, number] | undefined

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.

# topnumber | undefined

top offset applied to the g element container.

#<Treemap />

# rootHierarchyNode<Datum>required

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

# children((pack: HierarchyRectangularNode<Datum>) => ReactNode) | undefined

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

# classNamestring | undefined

className applied to the g element container.

# leftnumber | undefined

left offset applied to the g element container.

# nodeComponentFunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>, any> | undefined

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

# paddingnumber | ((node: HierarchyRectangularNode<Datum>) => number) | undefined

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

# paddingBottomnumber | ((node: HierarchyRectangularNode<Datum>) => number) | undefined

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

# paddingInnernumber | ((node: HierarchyRectangularNode<Datum>) => number) | undefined

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

# paddingLeftnumber | ((node: HierarchyRectangularNode<Datum>) => number) | undefined

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

# paddingOuternumber | ((node: HierarchyRectangularNode<Datum>) => number) | undefined

Sets padding used to spearate a node from its children.

# paddingRightnumber | ((node: HierarchyRectangularNode<Datum>) => number) | undefined

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

# paddingTopnumber | ((node: HierarchyRectangularNode<Datum>) => number) | undefined

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

# roundboolean | undefined

Whether to round treemap values.

# size[number, number] | undefined

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

# tileTileMethod<Datum> | undefined

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

# topnumber | undefined

top offset applied to the g element container.