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