react-tree-graph

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

6.X 5.X 4.X 3.X 2.X 1.X

Installing

npm install react-tree-graph --save

Usage

import { Tree } from 'react-tree-graph';

let 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.
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.
pathProps	object		{ className: 'link' }	Props to be added to the <path> element.
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.

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