Star
Chart primitives
Layouts & specialized
Interactions
SVG utilities
Data utilities
Umbrella package

@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

Pack
<Hierarchy.Pack />
Treemap
<Hierarchy.Treemap />
Dendrograms
<Hierarchy.Cluster /> + <Shape.LinkVertical />
Link Types
<Shape.Link* />
Trees
<Hierarchy.Tree /> + <Shape.LinkHorizontal />

APIs

#<Cluster />

# rootHierarchyNode<Datum>required

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

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

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

# classNamestring

className applied to the g element container.

# leftnumber

left offset applied to the g element container.

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

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

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

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

# nodeSize[number, number]

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

Sets the separation accessor, used to separate neighboring leaves.

# size[number, number]

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

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

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

# classNamestring

className applied to the g element container.

# leftnumber

left offset applied to the g element container.

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

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

# paddingnumber

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

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]

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

# topnumber

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

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

# classNamestring

className applied to the g element container.

# leftnumber

left offset applied to the g element container.

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

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

# paddingnumber

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

# roundboolean

Whether partition layout rounds values.

# size[number, number]

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

# topnumber

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

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

# classNamestring

className applied to the g element container.

# leftnumber

left offset applied to the g element container.

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

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

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

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

# nodeSize[number, number]

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

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]

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

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

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

# classNamestring

className applied to the g element container.

# leftnumber

left offset applied to the g element container.

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

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

# paddingNumerOrNumberAccessor<Datum>

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

# paddingBottomNumerOrNumberAccessor<Datum>

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

# paddingInnerNumerOrNumberAccessor<Datum>

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

# paddingLeftNumerOrNumberAccessor<Datum>

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

# paddingOuterNumerOrNumberAccessor<Datum>

Sets padding used to spearate a node from its children.

# paddingRightNumerOrNumberAccessor<Datum>

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

# paddingTopNumerOrNumberAccessor<Datum>

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

# roundboolean

Whether to round treemap values.

# size[number, number]

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

# tileTileMethod<Datum>

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

# topnumber

top offset applied to the g element container.

Exports