react-tree-graph

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 -------------- 7.X 6.X 5.X 4.X 3.X 2.X 1.X Installation ---------- ```sh npm install react-tree-graph --save ``` Usage ----- ```javascript import { Tree } from 'react-tree-graph'; const data = {

name: 'Parent',

children: [{

name: 'Child One'

}, {

name: 'Child Two'

}]

}; data={data}

height={400}

width={400}/>);

import { AnimatedTree } from 'react-tree-graph'; data={data}

height={400}

width={400}/>);

``` If you are using webpack, and have css-loader, you can include some default styles with: ```javascript 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 | |