tree-graph-flex
TypeScript icon, indicating that this package has built-in type declarations

1.0.25 • Public • Published

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"}
     direction={"forward"}
   />
 </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
direction enum no "forward" defines building diagram order. If "forward" - root element at left side, "reverse" - at right.

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

direction - diagram order. If "forward" - root element at left side, "reverse" - at right.


TypeDoc documentation

Readme

Keywords

none

Package Sidebar

Install

npm i tree-graph-flex

Weekly Downloads

6

Version

1.0.25

License

ISC

Unpacked Size

533 kB

Total Files

67

Last publish

Collaborators

  • asb13