@vx/hierarchy

This package contains two components, <Tree /> and <Cluster />, both of which render trees as a node-link diagram.

The <Tree /> component uses the d3 tree layout, which produces a tidy node-link diagram.

The <Cluster /> component uses the d3 cluster layout, which produces the leaf nodes of the tree at the same depth. This is also known as a dendrogram.

Both components use the same properties. The data must be a root node, as specified in the d3-hierarchy module. Note that you can use d3.hierarchy() to generate a root node from hierarchical data.

Furthermore, they take in nodeComponent and linkComponent as props, which are required to render the tree.

See this example for additional details.

Installation

npm install --save @vx/hierarchy

Components

API

# HierarchyDefaultLink.link<object>

<HierarchyDefaultNode />

# HierarchyDefaultNode.node<object>

<Cluster />

# Cluster.children<func>

# Cluster.className<string>

# Cluster.left<number>

# Cluster.linkComponent<any>
DefaultDefaultLink

# Cluster.nodeComponent<any>
DefaultDefaultNode

# Cluster.nodeSize<arrayOf[object Object]>

# Cluster.root<object> required

# Cluster.separation<func>

# Cluster.size<arrayOf[object Object]>

# Cluster.top<number>

<Pack />

# Pack.children<func>

# Pack.className<string>

# Pack.left<number>

# Pack.nodeComponent<any>
DefaultDefaultNode

# Pack.padding<number>

# Pack.radius<func>

# Pack.root<object> required

# Pack.size<arrayOf[object Object]>

# Pack.top<number>

<Partition />

# Partition.children<func>

# Partition.className<string>

# Partition.left<number>

# Partition.nodeComponent<any>
DefaultDefaultNode

# Partition.padding<number>

# Partition.root<object> required

# Partition.round<bool>

# Partition.size<arrayOf[object Object]>

# Partition.top<number>

<Tree />

# Tree.children<func>

# Tree.className<string>

# Tree.left<number>

# Tree.linkComponent<any>
DefaultDefaultLink

# Tree.nodeComponent<any>
DefaultDefaultNode

# Tree.nodeSize<arrayOf[object Object]>

# Tree.root<object> required

# Tree.separation<func>

# Tree.size<arrayOf[object Object]>

# Tree.top<number>

<Treemap />

# Treemap.children<func>

# Treemap.className<string>

# Treemap.left<number>

# Treemap.nodeComponent<any>
DefaultDefaultNode

# Treemap.padding<union(number|func)>

# Treemap.paddingBottom<union(number|func)>

# Treemap.paddingInner<union(number|func)>

# Treemap.paddingLeft<union(number|func)>

# Treemap.paddingOuter<union(number|func)>

# Treemap.paddingRight<union(number|func)>

# Treemap.paddingTop<union(number|func)>

# Treemap.root<object> required

# Treemap.round<bool>

# Treemap.size<arrayOf[object Object]>

# Treemap.tile<func>

# Treemap.top<number>