react-tree-graph
v8.0.2
Published
A react library for generating a graphical tree from data using d3
Downloads
12,598
Readme
react-tree-graph ![Github](https://img.shields.io/github/stars/jpb12/react-tree-graph?style=social)
A simple react component which renders data as a tree using svg.
Supports react 15.3+.
Check out the examples and the demo.
Older Versions
Installation
npm install react-tree-graph --save
Usage
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)