https://github.com/bitfancy/react-d3-tree
https://github.com/bitfancy/react-d3-tree
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bitfancy/react-d3-tree
- Owner: BitFancy
- Created: 2023-08-13T08:18:45.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-13T08:34:33.000Z (over 2 years ago)
- Last Synced: 2025-04-10T21:16:51.497Z (11 months ago)
- Size: 1000 Bytes
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React D3 Tree
👾 Playground
📖 API Documentation (v3)
## Contents
- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [Working with the default Tree](#working-with-the-default-tree)
- [Providing `data`](#providing-data)
- [Styling Nodes](#styling-nodes)
- [Styling Links](#styling-links)
- [Event Handlers](#event-handlers)
- [Customizing the Tree](#customizing-the-tree)
- [`renderCustomNodeElement`](#rendercustomnodeelement)
- [`pathFunc`](#pathfunc)
- [Providing your own `pathFunc`](#providing-your-own-pathfunc)
- [Development](#development)
- [Setup](#setup)
- [Hot reloading](#hot-reloading)
- [Contributors](#contributors)
## Installation
```bash
npm i --save react-d3-tree
```
## Usage
```jsx
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 (
// `` will fill width/height of its container; in this case `#treeWrapper`.
);
}