React D3 Tree is a React component that lets you represent hierarchical data (e.g. ancestor trees, organisational structure, package dependencies) as an animated & interactive tree graph by leveraging D3's tree
layout.
- Current release: https://bkrem.github.io/react-d3-tree/
To install via NPM, run:
npm i --save react-d3-tree
Or if Yarn is more your thing:
yarn add react-d3-tree
import React from 'react';
import Tree from 'react-d3-tree';
const myTreeData = [
{
name: 'Top Level',
attributes: {
keyA: 'val A',
keyB: 'val B',
keyC: 'val C',
},
children: [
{
name: 'Level 2: A',
attributes: {
keyA: 'val A',
keyB: 'val B',
keyC: 'val C',
},
},
{
name: 'Level 2: B',
},
],
},
];
class MyComponent extends React.Component {
render() {
return (
{/* <Tree /> will fill width/height of its container; in this case `#treeWrapper` */}
<div id="treeWrapper" style={{width: '50em', height: '20em'}}>
<Tree data={myTreeData} />
</div>
);
}
}
Property | Type | Options | Required? | Default | Description |
---|---|---|---|---|---|
data |
array |
required | undefined |
Single-element array containing hierarchical object (see myTreeData above). Contains (at least) name and parent keys. |
|
orientation |
string (enum) |
horizontal vertical |
horizontal |
horizontal - Tree expands left-to-right. vertical - Tree expands top-to-bottom. |
|
translate |
object |
{x: 0, y: 0} |
Translates the graph along the x/y axis by the specified amount of pixels (avoids the graph being stuck in the top left canvas corner). | ||
pathFunc |
string (enum) |
diagonal elbow |
diagonal |
diagonal - Renders smooth, curved edges between parent-child nodes. elbow - Renders sharp edges at right angles between parent-child nodes. |
|
collapsible |
bool |
true |
Toggles ability to collapse/expand the tree's nodes by clicking them. | ||
initialDepth |
number |
0..n |
undefined |
Sets the maximum node depth to which the tree is expanded on its initial render. Tree renders to full depth if prop is omitted. |
|
depthFactor |
number |
-n..0..n |
undefined |
Ensures the tree takes up a fixed amount of space (node.y = node.depth * depthFactor ), regardless of tree depth. TIP: Negative values invert the tree's direction. |
|
zoomable |
bool |
true |
Toggles ability to zoom in/out on the Tree by scaling it according to props.scaleExtent . |
||
scaleExtent |
object |
{min: 0.1, max: 1} |
Sets the minimum/maximum extent to which the tree can be scaled if props.zoomable is true. |
||
transitionDuration |
number |
0..n |
500 |
Sets the animation duration (in ms) of each expansion/collapse of a tree node. Set this to 0 to deactivate animations completely. |
|
styles |
object |
see Styling | Node /Link CSS files |
Overrides and/or enhances the tree's default styling. |
The tree's styles
prop may be used to override any of the tree's default styling.
The following object shape is expected by styles
:
{
links: <svgStyleObject>,
nodes: {
node: {
circle: <svgStyleObject>,
name: <svgStyleObject>,
attributes: <svgStyleObject>,
},
leafNode: {
circle: <svgStyleObject>,
name: <svgStyleObject>,
attributes: <svgStyleObject>,
},
},
}
where <svgStyleObject>
is any object containing CSS-like properties that are compatible with an <svg>
element's style
attribute, for example:
{
stroke: 'blue',
strokeWidth: 3,
}
For more information on the SVG style
attribute, check this out.
Statically hosted JSON or CSV files can be used as data sources via the additional treeUtil
module.
import React from 'react';
import { Tree, treeUtil } from 'react-d3-tree';
const csvSource = 'https://raw.githubusercontent.com/bkrem/react-d3-tree/master/docs/examples/data/csv-example.csv';
constructor() {
super();
this.state = {
data: undefined,
};
}
componentWillMount() {
treeUtil.parseCSV(csvSource)
.then((data) => {
this.setState({ data })
})
.catch((err) => console.error(err));
}
class MyComponent extends React.Component {
render() {
return (
{/* <Tree /> will fill width/height of its container; in this case `#treeWrapper` */}
<div id="treeWrapper" style={{width: '50em', height: '20em'}}>
<Tree data={this.state.data} />
</div>
);
}
}
For details regarding the treeUtil
module, please check the module's API docs.
For examples of each data type that can be parsed with treeUtil
, please check the data source examples.