React D3 Tree

👾 Playground

📖 API Documentation (v3)

Contents

• Installation
• Usage
• Props
• Working with the default Tree
  • Providing data
  • Styling Nodes
  • Styling Links
  • Event Handlers
• Customizing the Tree
  • renderCustomNodeElement
  • pathFunc
    • Providing your own pathFunc
• Development
  • Setup
  • Hot reloading
• Contributors

Installation

npm i --save react-d3-tree

Usage

import React from 'react';
import Tree from 'react-d3-tree';

// This is a simplified example of an org chart with a depth of 2.
// Note how deeper levels are defined recursively via the `children` property.
const orgChart = {
  name: 'CEO',
  children: [
    {
      name: 'Manager',
      attributes: {
        department: 'Production',
      },
      children: [
        {
          name: 'Foreman',
          attributes: {
            department: 'Fabrication',
          },
          children: [
            {
              name: 'Worker',
            },
          ],
        },
        {
          name: 'Foreman',
          attributes: {
            department: 'Assembly',
          },
          children: [
            {
              name: 'Worker',
            },
          ],
        },
      ],
    },
  ],
};

export default function OrgChartTree() {
  return (
    // `<Tree />` will fill width/height of its container; in this case `#treeWrapper`.
    <div id="treeWrapper" style={{ width: '50em', height: '20em' }}>
      <Tree data={orgChart} />
    </div>
  );
}