jpb12
react-tree-graph 
A simple react component which renders data as a tree using svg.
Supports react 16.8+.
Check out the examples and the demo.
Older Versions
Installation
npm install react-tree-graph --saveUsage
import { Tree } from 'react-tree-graph';
const data = {
name: 'Parent',
children: [{
name: 'Child One'
}, {
name: 'Child Two'
}]
};
<Tree
data={data}
height={400}
width={400}/>);
import { AnimatedTree } from 'react-tree-graph';
<AnimatedTree
data={data}
height={400}
width={400}/>);If you are using webpack, and have css-loader, you can include some default styles with:
import 'react-tree-graph/dist/style.css'Alternatively, both the JavaScript and CSS can be included directly from the dist folder with script tags.
Configuration
Tree
| Property | Type | Mandatory | Default | Description |
|---|---|---|---|---|
data |
object | yes | | The data to be rendered as a tree. Must be in a format accepted by d3.hierarchy. | |
margins |
object | | { bottom : 10, left : 20, right : 150, top : 10} |
The margins around the content. The right margin should be larger to include the rendered label text. | |
height |
number | yes | | The height of the rendered tree, including margins. | |
width |
number | yes | | The width of the rendered tree, including margins. | |
direction |
ltr,rtl |
| ltr |
The direction the tree will be rendered in. Either left-to-right or right-to-left. | |
children |
node | | | Will be rendered as children of the SVG, before the links and nodes. | |
getChildren |
function(node) | | node => node.children | A function that returns the children for a node, or null/undefined if no children exist. | |
keyProp |
string | | "name" | The property on each node to use as a key. | |
labelProp |
string | | "name" | The property on each node to render as a label. | |
nodeShape |
circle,image,polygon,rect |
| circle |
The shape of the node icons. | |
nodeProps |
object | | {} |
Props to be added to the <circle>, <image>, <polygon> or <rect> element. These will take priority over the default r added to circle and height, width, x and y added to image and rect. |
|
gProps |
object | | { className: 'node' } |
Props to be added to the <g> element. The default className will still be applied if a className property is not set. |
|
pathProps |
object | | { className: 'link' } |
Props to be added to the <path> element. The default className will still be applied if a className property is not set. |
|
pathFunc |
function(x1,y1,x2,y2) | | curved | Function to calculate the co-ordinates of the path between nodes. | |
svgProps |
object | | {} |
Props to be added to the <svg> element. |
|
textProps |
object | | {} |
Props to be added to the <text> element. |
AnimatedTree has the following properties in addition to the above.
| Property | Type | Mandatory | Default | Description |
|---|---|---|---|---|
duration |
number | | 500 | The duration in milliseconds of animations. | |
easing |
function(interval) | | d3-ease.easeQuadOut | The easing function for animations. Takes in a number between 0 and 1, and returns a number between 0 and 1. | |
steps |
number | | 20 | The number of steps in animations. A higher number will result in a smoother animation, but too high will cause performance issues. |
Events
Event handlers in nodeProps, gProps and textProps will be called with the node ID as an additional parameter.
function(event, nodeId) { ... }
Event handlers in pathProps will be called with the source and target node IDs as additional parameters.
function(event, sourceNodeId, targetNodeId) { ... }
Overriding props
The following properties can also be overridden by setting then for individual nodes.
| Global Prop | Node Prop |
|---|---|
keyProp |
keyProp |
labelProp |
labelProp |
nodeShape |
shape |
The following object properties, if set on individual nodes, will be combined with the object properties set on the tree. If a property exists in both objects, the value from the node will be taken.
| Prop | Description |
|---|---|
nodeProps |
|
gProps |
|
pathProps |
Props for a path are taken from the target node. |
textProps |
TypeScript
Type definitions are available as a separate package. (thanks @PCOffline)