React-tree-graph NPM

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

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	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.