Nonsense Placement Mandatory

    react-tree-graph

    7.0.0 • Public • Published

    react-tree-graph

    Build Status Coverage Status npm version npm bundle size licence

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

    Install

    npm i react-tree-graph

    DownloadsWeekly Downloads

    1,908

    Version

    7.0.0

    License

    MIT

    Unpacked Size

    80.6 kB

    Total Files

    28

    Last publish

    Collaborators

    • jpb12