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-hierarchy
utility 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
<Hierarchy.Pack />
<Hierarchy.Treemap />
<Hierarchy.Cluster /> + <Shape.LinkVertical />
<Shape.Link* />
<Hierarchy.Tree /> + <Shape.LinkHorizontal />
APIs
#<Cluster />
The root hierarchy node from which to derive the treemap layout.
(pack: HierarchyPointNode<Datum>) => ReactNode
Render override function which is passed the computed cluster layout data.
string
className applied to the g element container.
number
left offset applied to the g element container.
FunctionComponent<LinkComponentProps<Datum>> | ComponentClass<LinkComponentProps<Datum>, any>
Component which renders a single cluster link, passed the link object.
FunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>, any>
Component which renders a single cluster node, passed the node object.
[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⟩
.
(a: HierarchyPointNode<Datum>, b: HierarchyPointNode<Datum>) => number
Sets the separation accessor, used to separate neighboring leaves.
[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.
number
top offset applied to the g element container.
#<Pack />
The root hierarchy node from which to derive the pack layout.
(pack: HierarchyCircularNode<Datum>) => ReactNode
Render override function which is passed the computed pack layout data.
string
className applied to the g element container.
number
left offset applied to the g element container.
FunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>, any>
Component which renders a single pack node, passed the node object.
number
Sets this pack layout’s padding accessor to the specified number or function, which determines approximate separation of nodes in the resulting pack.
(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
.
[number, number]
Sets the pack layout size to the defined width, height.
number
top offset applied to the g element container.
#<Partition />
The root hierarchy node from which to derive the treemap layout.
(pack: HierarchyRectangularNode<Datum>) => ReactNode
Render override function which is passed the computed partition layout data.
string
className applied to the g element container.
number
left offset applied to the g element container.
FunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>, any>
Component which renders a single cluster node, passed the node object.
number
Sets padding, used to separate a node’s adjacent children.
boolean
Whether partition layout rounds values.
[number, number]
Sets this partition layout’s size to the specified two-element array of numbers [width, height]
.
number
top offset applied to the g element container.
#<Tree />
The root hierarchy node from which to derive the tree layout.
(pack: HierarchyPointNode<Datum>) => ReactNode
Render override function which is passed the computed cluster layout data.
string
className applied to the g element container.
number
left offset applied to the g element container.
FunctionComponent<LinkComponentProps<Datum>> | ComponentClass<LinkComponentProps<Datum>, any>
Component which renders a single cluster link, passed the link object.
FunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>, any>
Component which renders a single cluster node, passed the node object.
[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⟩
.
(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.
[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.
number
top offset applied to the g element container.
#<Treemap />
The root hierarchy node from which to derive the treemap layout.
(pack: HierarchyRectangularNode<Datum>) => ReactNode
Render override function which is passed the computed pack layout data.
string
className applied to the g element container.
number
left offset applied to the g element container.
FunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>, any>
Component which renders a single pack node, passed the node object.
NumerOrNumberAccessor<Datum>
Sets both inner and outer padding to the specified number or accessor.
NumerOrNumberAccessor<Datum>
Sets padding used to spearate the bottom edge of a node from its children.
NumerOrNumberAccessor<Datum>
Sets padding used to separate a node’s adjacent children.
NumerOrNumberAccessor<Datum>
Sets padding used to spearate the left edge of a node from its children.
NumerOrNumberAccessor<Datum>
Sets padding used to spearate a node from its children.
NumerOrNumberAccessor<Datum>
Sets padding used to spearate the right edge of a node from its children.
NumerOrNumberAccessor<Datum>
Sets padding used to spearate the top edge of a node from its children.
boolean
Whether to round treemap values.
[number, number]
Sets this treemap layout’s size to the specified two-element array of numbers width, height
TileMethod<Datum>
Sets the treemap tiling method to the specified function (exported from this package). See https://github.com/d3/d3-hierarchy#treemap for more.
number
top offset applied to the g element container.