# @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

- HierarchyDefaultLink
- HierarchyDefaultNode
- Cluster
- Pack
- Partition
- Tree
- Treemap

## API

### <HierarchyDefaultLink />

# HierarchyDefaultLink.link<object>

### <HierarchyDefaultNode />

# HierarchyDefaultNode.node<object>

### <Cluster />

# Cluster.children<func>

# Cluster.className<string>

# Cluster.left<number>

# Cluster.linkComponent<any>

Default | DefaultLink

# Cluster.nodeComponent<any>

Default | DefaultNode

# 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>

Default | DefaultNode

# 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>

Default | DefaultNode

# 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>

Default | DefaultLink

# Tree.nodeComponent<any>

Default | DefaultNode

# 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>

Default | DefaultNode

# 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>