tree-graph-flex

Tree Graph Flex

This is simple component which renders data as a tree using svg.

Example

Installing

npm install tree-graph-flex --save

Usage

import  { TreeGraphFlex } from 'tree-graph-flex';

ReactDOM.render(
 <React.StrictMode>
   <TreeGraphFlex 
     data={data}
     nodeContent={ node => <div> {node.subject} </div> }
     yOffset={15}
     xOffset={ level => 30 + level * 10 }
     nodeWidth={150}
     nodeHeight={50}
     pathShape={"bezier"}
     lineClassName={"connectingLines"}
     nodeBoxClassName={"nodeBox"}
   />
 </React.StrictMode>,
 document.getElementById('root')
);

Example data object

const data = {
  id: "0",
  subject: "animals",
  children: [
    {
      id: "1",
      subject: "dogs",
      children: [
        {
          id: "1.1",
          subject: "terriers",
          children: [],
        },
        {
          id: "1.2",
          subject: "mastiffs",
          children: [],
        },
      ],
    },
    {
      id: "2",
      subject: "birds",
      children: [
        {
          id: "2.1",
          subject: "parrots",
          children: [],
        },
        {
          id: "2.2",
          subject: "crows",
          children: [],
        },
      ],
    },
  ],
};

Component props

Property	Type	Mandatory	Default	Description
data	object	yes	no	The data to be rendered as a tree
nodeWidth	number	no	100	Width node container
nodeHeight	number	no	50	Height node container
xOffset	number or function	no	50	Distance between adjacent nodes by x
yOffset	number	no	50	Distance between adjacent nodes by y
pathShape	enum or function	no	“bezier”	Defines curve shape, which connects nodes
nodeContent	function	yes	no	Node box content. Html element
lineClassName	string	no	"connectingLine"	ClassName, defines style of curve shape, which connects nodes
nodeBoxClassName	string	no	"nodeBox"	ClassName, defines style of node view

props description:

nodeWidth, nodeHeight - size of node box in pixels, defined by HTML element size, that return by nodeContent function;

xOffset, yOffset - distance between adjacent nodes. xOffset may be a function with level argument, where level - tree branches level;

pathShape - there are three preset functions: bezier, straight and roundedAngles. Functions returns d attribute for tag path as string. Instead, you can pass your function, which accepts following parameters: start x, start y, end x, end y. Corner rounding in roundedAngles function calculates automatically, and it depends on distance between adjacent nodes. As bonus, there is another one preset function - staticRadiusRoundedAngles, which accepts five arguments. Fifth argument - corner rounding radius.

nodeContent - any HTML element or react component.

---

TypeDoc documentation