# @vx/hierarchy

    npm install --save @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.

## `<Tree />` and `<Cluster />`

### Properties

Name | Default | Type | Description
--- | --- | --- | ---
top | 0 | number | Margin to top
left | 0 | number | Margin on left
className |  | string | The className for the component
root |  | object | Root node for hierarchical data; see `d3.hierarchy()`
size | [1, 1] | array | Size of tree/cluster layout specified by `[width, height]`; see `tree.size()`
nodeSize | null | array | Size of tree/cluster layout's nodes specified by `[width, height]`; see `tree.nodeSize()`
separation |  | function | Separation accessor for tree/cluster layout; see `tree.separation()`
nodeComponent | `<HierarchyDefaultNode />` | Component | Component to render for each node
linkComponent | `<HierarchyDefaultLink />` | Component | Component to render for links between nodes

## Source For Components

- `<Tree />`
- `<Cluster />`