jpb12/react-tree-graph

A react library for generating a graphical tree from data using d3

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

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

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)