30 |
31 |
32 | React D3 Tree is a [React](http://facebook.github.io/react/) component that lets you represent hierarchical data (e.g. family trees, org charts, file directories) as an interactive tree graph with minimal setup, by leveraging [D3](https://d3js.org/)'s `tree` layout.
33 |
34 | > **Upgrading from v1? Check out the [v2 release notes](https://github.com/bkrem/react-d3-tree/releases/tag/v2.0.0).**
35 |
36 | > **[Legacy v1 docs](https://github.com/bkrem/react-d3-tree/tree/v1)**
37 |
38 | ## Contents
39 | - [Installation](#installation)
40 | - [Usage](#usage)
41 | - [Props](#props)
42 | - [Working with the default Tree](#working-with-the-default-tree)
43 | - [Providing `data`](#providing-data)
44 | - [Styling Nodes](#styling-nodes)
45 | - [Styling Links](#styling-links)
46 | - [Event Handlers](#event-handlers)
47 | - [Customizing the Tree](#customizing-the-tree)
48 | - [`renderCustomNodeElement`](#rendercustomnodeelement)
49 | - [`pathFunc`](#pathfunc)
50 | - [Providing your own `pathFunc`](#providing-your-own-pathfunc)
51 | - [Development](#development)
52 | - [Setup](#setup)
53 | - [Hot reloading](#hot-reloading)
54 | - [Contributors](#contributors)
55 |
56 | ## Installation
57 | ```bash
58 | npm i --save react-d3-tree
59 | ```
60 |
61 | ## Usage
62 | ```jsx
63 | import React from 'react';
64 | import Tree from 'react-d3-tree';
65 |
66 | // This is a simplified example of an org chart with a depth of 2.
67 | // Note how deeper levels are defined recursively via the `children` property.
68 | const orgChart = {
69 | name: 'CEO',
70 | children: [
71 | {
72 | name: 'Manager',
73 | attributes: {
74 | department: 'Production',
75 | },
76 | children: [
77 | {
78 | name: 'Foreman',
79 | attributes: {
80 | department: 'Fabrication',
81 | },
82 | children: [
83 | {
84 | name: 'Worker',
85 | },
86 | ],
87 | },
88 | {
89 | name: 'Foreman',
90 | attributes: {
91 | department: 'Assembly',
92 | },
93 | children: [
94 | {
95 | name: 'Worker',
96 | },
97 | ],
98 | },
99 | ],
100 | },
101 | ],
102 | };
103 |
104 | export default function OrgChartTree() {
105 | return (
106 | // `` will fill width/height of its container; in this case `#treeWrapper`.
107 |
108 |
109 |
110 | );
111 | }
112 | ```
113 |
114 | ## Props
115 | For details on all props accepted by `Tree`, check out the [TreeProps reference docs](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_tree_types_.treeprops.html).
116 |
117 | The only required prop is [data](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_tree_types_.treeprops.html#data), all other props on `Tree` are optional/pre-defined (see "Default value" on each prop definition).
118 |
119 | ## Working with the default Tree
120 | `react-d3-tree` provides default implementations for `Tree`'s nodes & links, which are intended to get you up & running with a working tree quickly.
121 |
122 | This section is focused on explaining **how to provide data, styles and event handlers for the default `Tree` implementation**.
123 |
124 | > Need more fine-grained control over how nodes & links appear/behave? Check out the [Customizing the Tree](#customizing-the-tree) section below.
125 |
126 | ### Providing `data`
127 | By default, `Tree` expects each node object in `data` to implement the [`RawNodeDatum` interface](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_types_common_.rawnodedatum.html):
128 |
129 | ```ts
130 | interface RawNodeDatum {
131 | name: string;
132 | attributes?: Record;
133 | children?: RawNodeDatum[];
134 | }
135 | ```
136 |
137 | The `orgChart` example in the [Usage](#usage) section above is an example of this:
138 |
139 | - Every node has at least a `name`. This is rendered as the **node's primary label**.
140 | - Some nodes have `attributes` defined (the `CEO` node does not). **The key-value pairs in `attributes` are rendered as a list of secondary labels**.
141 | - Nodes can have further `RawNodeDatum` objects nested inside them via the `children` key, creating a hierarchy from which the tree graph can be generated.
142 |
143 | ### Styling Nodes
144 | `Tree` provides the following props to style different types of nodes, all of which use an SVG `circle` by default:
145 |
146 | - `rootNodeClassName` - applied to the root node.
147 | - `branchNodeClassName` - applied to any node with 1+ children.
148 | - `leafNodeClassName` - applied to any node without children.
149 |
150 | To visually distinguish these three types of nodes from each other by color, we could provide each with their own class:
151 |
152 | ```css
153 | /* custom-tree.css */
154 |
155 | .node__root > circle {
156 | fill: red;
157 | }
158 |
159 | .node__branch > circle {
160 | fill: yellow;
161 | }
162 |
163 | .node__leaf > circle {
164 | fill: green;
165 | /* Let's also make the radius of leaf nodes larger */
166 | r: 40;
167 | }
168 | ```
169 |
170 | ```jsx
171 | import React from 'react';
172 | import Tree from 'react-d3-tree';
173 | import './custom-tree.css';
174 |
175 | // ...
176 |
177 | export default function StyledNodesTree() {
178 | return (
179 |
180 |
186 |
187 | );
188 | }
189 | ```
190 |
191 | > For more details on the `className` props for nodes, see the [TreeProps reference docs](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_tree_types_.treeprops.html).
192 |
193 | ### Styling Links
194 | `Tree` provides the `pathClassFunc` property to pass additional classNames to every link to be rendered.
195 |
196 | Each link calls `pathClassFunc` with its own `TreeLinkDatum` and the tree's current `orientation`. `Tree` expects `pathClassFunc` to return a `className` string.
197 |
198 | ```jsx
199 | function StyledLinksTree() {
200 | const getDynamicPathClass = ({ source, target }, orientation) => {
201 | if (!target.children) {
202 | // Target node has no children -> this link leads to a leaf node.
203 | return 'link__to-leaf';
204 | }
205 |
206 | // Style it as a link connecting two branch nodes by default.
207 | return 'link__to-branch';
208 | };
209 |
210 | return (
211 | 'custom-link'}
215 | // Want to apply multiple static classes? `Array.join` is your friend :)
216 | pathClassFunc={() => ['custom-link', 'extra-custom-link'].join(' ')}
217 | // Dynamically determine which `className` to pass based on the link's properties.
218 | pathClassFunc={getDynamicPathClass}
219 | />
220 | );
221 | }
222 | ```
223 |
224 | > For more details, see the `PathClassFunction` [reference docs](https://bkrem.github.io/react-d3-tree/docs/modules/_src_types_common_.html#pathclassfunction).
225 |
226 | ### Event Handlers
227 | `Tree` exposes the following event handler callbacks by default:
228 |
229 | - [onLinkClick](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_tree_types_.treeprops.html#onlinkclick)
230 | - [onLinkMouseOut](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_tree_types_.treeprops.html#onlinkmouseout)
231 | - [onLinkMouseOver](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src__tree_types_.treeprops.html#onlinkmouseover)
232 | - [onNodeClick](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_tree_types_.treeprops.html#onnodeclick)
233 | - [onNodeMouseOut](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_tree_types_.treeprops.html#onnodemouseout)
234 | - [onNodeMouseOver](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_tree_types_.treeprops.html#onnodemouseover)
235 |
236 | > **Note:** Nodes are expanded/collapsed whenever `onNodeClick` fires. To prevent this, set the [`collapsible` prop](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_tree_types_.treeprops.html#collapsible) to `false`.
237 | > `onNodeClick` will still fire, but it will not change the target node's expanded/collapsed state.
238 |
239 | ## Customizing the Tree
240 |
241 |
242 | ### `renderCustomNodeElement`
243 | The [`renderCustomNodeElement` prop](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_tree_types_.treeprops.html#rendercustomnodeelement) accepts a **custom render function that will be used for every node in the tree.**
244 |
245 | Cases where you may find rendering your own `Node` element useful include:
246 |
247 | - Using a **different SVG tag for your nodes** (instead of the default ``) - [Example (codesandbox.io)](https://codesandbox.io/s/rd3t-v2-custom-svg-tag-1bq1e?file=/src/App.js)
248 | - Gaining **fine-grained control over event handling** (e.g. to implement events not covered by the default API) - [Example (codesandbox.io)](https://codesandbox.io/s/rd3t-v2-custom-event-handlers-5pwxw?file=/src/App.js)
249 | - Building **richer & more complex nodes/labels** by leveraging the `foreignObject` tag to render HTML inside the SVG namespace - [Example (codesandbox.io)](https://codesandbox.io/s/rd3t-v2-custom-with-foreignobject-0mfj8?file=/src/App.js)
250 |
251 | ### `pathFunc`
252 | The [`pathFunc` prop](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_tree_types_.treeprops.html#pathfunc) accepts a predefined `PathFunctionOption` enum or a user-defined `PathFunction`.
253 |
254 | By changing or providing your own `pathFunc`, you are able to change how links between nodes of the tree (which are SVG `path` tags under the hood) are drawn.
255 |
256 | The currently [available enums](https://bkrem.github.io/react-d3-tree/docs/modules/_src_types_common_.html#pathfunctionoption) are:
257 | - `diagonal` (default)
258 | - `elbow`
259 | - `straight`
260 | - `step`
261 |
262 | > Want to see how each option looks? [Try them out on the playground](https://bkrem.github.io/react-d3-tree).
263 |
264 | #### Providing your own `pathFunc`
265 | If none of the available path functions suit your needs, you're also able to provide a custom `PathFunction`:
266 |
267 | ```jsx
268 | function CustomPathFuncTree() {
269 | const straightPathFunc = (linkDatum, orientation) => {
270 | const { source, target } = linkDatum;
271 | return orientation === 'horizontal'
272 | ? `M${source.y},${source.x}L${target.y},${target.x}`
273 | : `M${source.x},${source.y}L${target.x},${target.y}`;
274 | };
275 |
276 | return (
277 |
282 | );
283 | }
284 | ```
285 |
286 | > For more details, see the [`PathFunction` reference docs](https://bkrem.github.io/react-d3-tree/docs/modules/_types_common_.html#pathfunction).
287 |
288 | ## Development
289 | ### Setup
290 | To set up `react-d3-tree` for local development, clone the repo and follow the steps below:
291 |
292 | ```bash
293 | # 1. Set up the library, create a reference to it for symlinking.
294 | cd react-d3-tree
295 | npm i
296 | npm link
297 |
298 | # 2. Set up the demo/playground, symlink to the local copy of `react-d3-tree`.
299 | cd demo
300 | npm i
301 | npm link react-d3-tree
302 | ```
303 |
304 | > **Tip:** If you'd prefer to use your own app for development instead of the demo, simply run `npm link react-d3-tree` in your app's root folder instead of the demo's :)
305 |
306 | ### Hot reloading
307 | ```bash
308 | npm run build:watch
309 | ```
310 |
311 | If you're using `react-d3-tree/demo` for development, open up another terminal window in the `demo` directory and call:
312 | ```bash
313 | npm start
314 | ```
315 |
316 | ## Contributors
317 | A huge thank you to all the [contributors](https://github.com/bkrem/react-d3-tree/graphs/contributors), as well as users who have opened issues with thoughtful suggestions and feedback.
318 |
--------------------------------------------------------------------------------
/babel.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["@babel/preset-env", { "targets": { "node": "current" } }],
4 | "@babel/preset-typescript",
5 | "@babel/preset-react"
6 | ],
7 | "plugins": ["@babel/plugin-proposal-class-properties"]
8 | }
9 |
--------------------------------------------------------------------------------
/demo/.env:
--------------------------------------------------------------------------------
1 | SKIP_PREFLIGHT_CHECK=true
2 |
--------------------------------------------------------------------------------
/demo/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "printWidth": 100,
3 | "singleQuote": true,
4 | "trailingComma": "es5",
5 | "tabWidth": 2,
6 | "bracketSpacing": true,
7 | "arrowParens": "avoid",
8 | "parser": "typescript",
9 | "overrides": [
10 | {
11 | "files": "*.yml",
12 | "options": { "parser": "yaml" }
13 | },
14 | {
15 | "files": "*.json",
16 | "options": { "parser": "json" }
17 | }
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | ## Available Scripts
4 |
5 | In the project directory, you can run:
6 |
7 | ### `yarn start`
8 |
9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 |
12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console.
14 |
15 | ### `yarn test`
16 |
17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19 |
20 | ### `yarn build`
21 |
22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 |
25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed!
27 |
28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29 |
30 | ### `yarn eject`
31 |
32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33 |
34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35 |
36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37 |
38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39 |
40 | ## Learn More
41 |
42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43 |
44 | To learn React, check out the [React documentation](https://reactjs.org/).
45 |
46 | ### Code Splitting
47 |
48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
49 |
50 | ### Analyzing the Bundle Size
51 |
52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
53 |
54 | ### Making a Progressive Web App
55 |
56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
57 |
58 | ### Advanced Configuration
59 |
60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61 |
62 | ### Deployment
63 |
64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65 |
66 | ### `yarn build` fails to minify
67 |
68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
69 |
--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "rd3t-demo",
3 | "version": "0.1.0",
4 | "private": true,
5 | "homepage": "https://bkrem.github.io/react-d3-tree",
6 | "dependencies": {
7 | "@testing-library/jest-dom": "^4.2.4",
8 | "@testing-library/react": "^9.3.2",
9 | "@testing-library/user-event": "^7.1.2",
10 | "clone": "^2.1.2",
11 | "gh-pages": "^3.1.0",
12 | "react": "^18.2.0",
13 | "react-d3-tree": "^3.6.3",
14 | "react-dom": "^18.2.0",
15 | "react-scripts": "^3.4.4"
16 | },
17 | "scripts": {
18 | "start": "export NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
19 | "build": "export NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
20 | "test": "react-scripts test",
21 | "eject": "react-scripts eject",
22 | "deploy": "gh-pages -d build"
23 | },
24 | "eslintConfig": {
25 | "extends": "react-app"
26 | },
27 | "browserslist": {
28 | "production": [
29 | ">0.2%",
30 | "not dead",
31 | "not op_mini all"
32 | ],
33 | "development": [
34 | "last 1 chrome version",
35 | "last 1 firefox version",
36 | "last 1 safari version"
37 | ]
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/demo/public/_config.yml:
--------------------------------------------------------------------------------
1 | # We need this to allow GH Pages to include underscore-prefixed Typedoc pages.
2 | include:
3 | - '_*_.html'
4 | - '_*_.*.html'
5 |
--------------------------------------------------------------------------------
/demo/public/csv-example.csv:
--------------------------------------------------------------------------------
1 | parent,child,CSV Attribute A,CSV Attribute B
2 | "CSVNode1","CSVNode2",22,someValue
3 | "CSVNode1","CSVNode3",23,someValue
4 | "CSVNode2","CSVNode4",1,someValue
5 | "CSVNode2","CSVNode5",2,someValue
6 | "CSVNode2","CSVNode6",3,someValue
7 | "CSVNode2","CSVNode7",4,someValue
8 | "CSVNode2","CSVNode8",5,someValue
9 | "CSVNode2","CSVNode9",6,someValue
10 | "CSVNode2","CSVNode10",7,someValue
11 | "CSVNode4","CSVNode11",8,someValue
12 | "CSVNode7","CSVNode12",9,someValue
13 | "CSVNode9","CSVNode13",10,someValue
14 | "CSVNode10","CSVNode14",11,someValue
15 | "CSVNode11","CSVNode15",12,someValue
16 | "CSVNode3","CSVNode16",13,someValue
17 | "CSVNode16","CSVNode17",14,someValue
18 | "CSVNode16","CSVNode18",15,someValue
19 | "CSVNode16","CSVNode19",16,someValue
20 | "CSVNode16","CSVNode20",17,someValue
21 | "CSVNode17","CSVNode21",18,someValue
22 | "CSVNode18","CSVNode22",19,someValue
23 | "CSVNode19","CSVNode23",20,someValue
24 | "CSVNode20","CSVNode24",21,someValue
25 |
--------------------------------------------------------------------------------
/demo/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bkrem/react-d3-tree/94e56314880a8d3f4d5d4c55de1ef035e1149438/demo/public/favicon.png
--------------------------------------------------------------------------------
/demo/public/flat-json-example.json:
--------------------------------------------------------------------------------
1 | [{
2 | "parent": "FlatJSONNode1",
3 | "child": "FlatJSONNode2",
4 | "FlatJSON Attribute A": "22",
5 | "FlatJSON Attribute B": "someValue"
6 | }, {
7 | "parent": "FlatJSONNode1",
8 | "child": "FlatJSONNode3",
9 | "FlatJSON Attribute A": "23",
10 | "FlatJSON Attribute B": "someValue"
11 | }, {
12 | "parent": "FlatJSONNode2",
13 | "child": "FlatJSONNode4",
14 | "FlatJSON Attribute A": "1",
15 | "FlatJSON Attribute B": "someValue"
16 | }, {
17 | "parent": "FlatJSONNode2",
18 | "child": "FlatJSONNode5",
19 | "FlatJSON Attribute A": "2",
20 | "FlatJSON Attribute B": "someValue"
21 | }, {
22 | "parent": "FlatJSONNode2",
23 | "child": "FlatJSONNode6",
24 | "FlatJSON Attribute A": "3",
25 | "FlatJSON Attribute B": "someValue"
26 | }, {
27 | "parent": "FlatJSONNode2",
28 | "child": "FlatJSONNode7",
29 | "FlatJSON Attribute A": "4",
30 | "FlatJSON Attribute B": "someValue"
31 | }, {
32 | "parent": "FlatJSONNode2",
33 | "child": "FlatJSONNode8",
34 | "FlatJSON Attribute A": "5",
35 | "FlatJSON Attribute B": "someValue"
36 | }, {
37 | "parent": "FlatJSONNode2",
38 | "child": "FlatJSONNode9",
39 | "FlatJSON Attribute A": "6",
40 | "FlatJSON Attribute B": "someValue"
41 | }, {
42 | "parent": "FlatJSONNode2",
43 | "child": "FlatJSONNode10",
44 | "FlatJSON Attribute A": "7",
45 | "FlatJSON Attribute B": "someValue"
46 | }, {
47 | "parent": "FlatJSONNode4",
48 | "child": "FlatJSONNode11",
49 | "FlatJSON Attribute A": "8",
50 | "FlatJSON Attribute B": "someValue"
51 | }, {
52 | "parent": "FlatJSONNode7",
53 | "child": "FlatJSONNode12",
54 | "FlatJSON Attribute A": "9",
55 | "FlatJSON Attribute B": "someValue"
56 | }, {
57 | "parent": "FlatJSONNode9",
58 | "child": "FlatJSONNode13",
59 | "FlatJSON Attribute A": "10",
60 | "FlatJSON Attribute B": "someValue"
61 | }, {
62 | "parent": "FlatJSONNode10",
63 | "child": "FlatJSONNode14",
64 | "FlatJSON Attribute A": "11",
65 | "FlatJSON Attribute B": "someValue"
66 | }, {
67 | "parent": "FlatJSONNode11",
68 | "child": "FlatJSONNode15",
69 | "FlatJSON Attribute A": "12",
70 | "FlatJSON Attribute B": "someValue"
71 | }, {
72 | "parent": "FlatJSONNode3",
73 | "child": "FlatJSONNode16",
74 | "FlatJSON Attribute A": "13",
75 | "FlatJSON Attribute B": "someValue"
76 | }, {
77 | "parent": "FlatJSONNode16",
78 | "child": "FlatJSONNode17",
79 | "FlatJSON Attribute A": "14",
80 | "FlatJSON Attribute B": "someValue"
81 | }, {
82 | "parent": "FlatJSONNode16",
83 | "child": "FlatJSONNode18",
84 | "FlatJSON Attribute A": "15",
85 | "FlatJSON Attribute B": "someValue"
86 | }, {
87 | "parent": "FlatJSONNode16",
88 | "child": "FlatJSONNode19",
89 | "FlatJSON Attribute A": "16",
90 | "FlatJSON Attribute B": "someValue"
91 | }, {
92 | "parent": "FlatJSONNode16",
93 | "child": "FlatJSONNode20",
94 | "FlatJSON Attribute A": "17",
95 | "FlatJSON Attribute B": "someValue"
96 | }, {
97 | "parent": "FlatJSONNode17",
98 | "child": "FlatJSONNode21",
99 | "FlatJSON Attribute A": "18",
100 | "FlatJSON Attribute B": "someValue"
101 | }, {
102 | "parent": "FlatJSONNode18",
103 | "child": "FlatJSONNode22",
104 | "FlatJSON Attribute A": "19",
105 | "FlatJSON Attribute B": "someValue"
106 | }, {
107 | "parent": "FlatJSONNode19",
108 | "child": "FlatJSONNode23",
109 | "FlatJSON Attribute A": "20",
110 | "FlatJSON Attribute B": "someValue"
111 | }, {
112 | "parent": "FlatJSONNode20",
113 | "child": "FlatJSONNode24",
114 | "FlatJSON Attribute A": "21",
115 | "FlatJSON Attribute B": "someValue"
116 | }]
117 |
--------------------------------------------------------------------------------
/demo/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
18 | React D3 Tree
19 |
20 |
21 |
22 |
23 |
33 |
44 |
77 |
78 |
79 |
--------------------------------------------------------------------------------
/demo/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 |
--------------------------------------------------------------------------------
/demo/src/App.css:
--------------------------------------------------------------------------------
1 | #root,
2 | .App {
3 | min-width:100%;
4 | min-height: 100%;
5 | }
6 |
7 | .title {
8 | text-align: center;
9 | margin-bottom: 20px;
10 | }
11 |
12 | .demo-container {
13 | position: fixed;
14 | display: flex;
15 | flex-direction: row;
16 | height: 100%;
17 | width: 100%;
18 | }
19 |
20 | .column-left {
21 | width: 30%;
22 | display: flex;
23 | flex-direction: column;
24 | background: #f7fafc;
25 | border-right: 1px solid #2d3748;
26 | }
27 |
28 | .controls-container {
29 | display: flex;
30 | flex-direction: column;
31 | flex-basis: 1;
32 | overflow-y: scroll;
33 | }
34 |
35 | .state-container {
36 | display: none;
37 | flex-direction: column;
38 | flex-basis: 30%;
39 | border-top: 1px solid black;
40 | }
41 | .state-container > h4 {
42 | color: black;
43 | }
44 |
45 | .state {
46 | width: 100%;
47 | height: 100%;
48 | }
49 |
50 | .column-right {
51 | height: 100%;
52 | width: 100%;
53 | }
54 |
55 | .tree-container {
56 | height: 100%;
57 | /* background: #ccf6c8; */
58 | }
59 |
60 | .prop-container {
61 | padding: 2px 5px;
62 | margin: 15px 10px;
63 | }
64 | .prop {
65 | font-weight: bold;
66 | display: block;
67 | }
68 |
69 | .prop-large {
70 | font-size: 16px;
71 | }
72 |
73 | .sub-prop {
74 | padding: 5px;
75 | }
76 |
77 | .btn-controls {
78 | color: #f7fafc;
79 | background-color: #2d3748;
80 | transition: color 0.15s ease, border-color 0.15s ease;
81 | }
82 |
83 | .btn-controls:hover,
84 | .btn-controls:focus,
85 | .btn-controls:active {
86 | color: white;
87 | border-color: #f7fafc;
88 | }
89 |
90 | .tree-stats-container {
91 | text-align: center;
92 | padding: 0.5rem 2rem;
93 | border-bottom: 1px solid #2d3748;
94 | font-weight: bold;
95 | }
96 |
97 | /* Custom node classes */
98 | .demo-node > circle {
99 | fill: #2d3748;
100 | stroke: #2d3748;
101 | }
102 |
103 | /* Custom path classes */
104 | .my-path-class {
105 | stroke: royalblue;
106 | stroke-width: 10;
107 | }
108 |
109 |
--------------------------------------------------------------------------------
/demo/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import clone from 'clone';
3 | import Tree from 'react-d3-tree';
4 | import { version } from 'react-d3-tree/package.json';
5 | import Switch from './components/Switch';
6 | import MixedNodeElement from './components/MixedNodeElement';
7 | import PureSvgNodeElement from './components/PureSvgNodeElement';
8 | import MixedNodeInputElement from './components/MixedNodeInputElement';
9 | import './App.css';
10 |
11 | // Data examples
12 | import orgChartJson from './examples/org-chart.json';
13 | import flareJson from './examples/d3-hierarchy-flare.json';
14 | import reactTree from './examples/reactRepoTree';
15 |
16 | console.log('Demo React version: ', React.version);
17 |
18 | const customNodeFnMapping = {
19 | svg: {
20 | description: 'Default - Pure SVG node & label (IE11 compatible)',
21 | fn: (rd3tProps, appState) => (
22 |
27 | ),
28 | },
29 | mixed: {
30 | description: 'MixedNodeElement - SVG `circle` + `foreignObject` label',
31 | fn: ({ nodeDatum, toggleNode }, appState) => (
32 |
42 | ),
43 | },
44 | input: {
45 | description: 'MixedNodeElement - Interactive nodes with inputs',
46 | fn: ({ nodeDatum, toggleNode }, appState) => (
47 |
57 | ),
58 | },
59 | };
60 |
61 | const countNodes = (count = 0, n) => {
62 | // Count the current node
63 | count += 1;
64 |
65 | // Base case: reached a leaf node.
66 | if (!n.children) {
67 | return count;
68 | }
69 |
70 | // Keep traversing children while updating `count` until we reach the base case.
71 | return n.children.reduce((sum, child) => countNodes(sum, child), count);
72 | };
73 |
74 | class App extends Component {
75 | constructor() {
76 | super();
77 |
78 | this.addedNodesCount = 0;
79 |
80 | this.state = {
81 | data: orgChartJson,
82 | totalNodeCount: countNodes(0, Array.isArray(orgChartJson) ? orgChartJson[0] : orgChartJson),
83 | orientation: 'horizontal',
84 | dimensions: undefined,
85 | centeringTransitionDuration: 800,
86 | translateX: 200,
87 | translateY: 300,
88 | collapsible: true,
89 | shouldCollapseNeighborNodes: false,
90 | initialDepth: 1,
91 | depthFactor: undefined,
92 | zoomable: true,
93 | draggable: true,
94 | zoom: 1,
95 | scaleExtent: { min: 0.1, max: 1 },
96 | separation: { siblings: 2, nonSiblings: 2 },
97 | nodeSize: { x: 200, y: 200 },
98 | enableLegacyTransitions: false,
99 | transitionDuration: 500,
100 | renderCustomNodeElement: customNodeFnMapping['svg'].fn,
101 | styles: {
102 | nodes: {
103 | node: {
104 | circle: {
105 | fill: '#52e2c5',
106 | },
107 | attributes: {
108 | stroke: '#000',
109 | },
110 | },
111 | leafNode: {
112 | circle: {
113 | fill: 'transparent',
114 | },
115 | attributes: {
116 | stroke: '#000',
117 | },
118 | },
119 | },
120 | },
121 | };
122 |
123 | this.setTreeData = this.setTreeData.bind(this);
124 | this.setLargeTree = this.setLargeTree.bind(this);
125 | this.setOrientation = this.setOrientation.bind(this);
126 | this.setPathFunc = this.setPathFunc.bind(this);
127 | this.handleChange = this.handleChange.bind(this);
128 | this.handleFloatChange = this.handleFloatChange.bind(this);
129 | this.toggleCollapsible = this.toggleCollapsible.bind(this);
130 | this.toggleZoomable = this.toggleZoomable.bind(this);
131 | this.toggleDraggable = this.toggleDraggable.bind(this);
132 | this.toggleCenterNodes = this.toggleCenterNodes.bind(this);
133 | this.setScaleExtent = this.setScaleExtent.bind(this);
134 | this.setSeparation = this.setSeparation.bind(this);
135 | this.setNodeSize = this.setNodeSize.bind(this);
136 | }
137 |
138 | setTreeData(data) {
139 | this.setState({
140 | data,
141 | totalNodeCount: countNodes(0, Array.isArray(data) ? data[0] : data),
142 | });
143 | }
144 |
145 | setLargeTree(data) {
146 | this.setState({
147 | data,
148 | transitionDuration: 0,
149 | });
150 | }
151 |
152 | setOrientation(orientation) {
153 | this.setState({ orientation });
154 | }
155 |
156 | setPathFunc(pathFunc) {
157 | this.setState({ pathFunc });
158 | }
159 |
160 | handleChange(evt) {
161 | const target = evt.target;
162 | const parsedIntValue = parseInt(target.value, 10);
163 | if (target.value === '') {
164 | this.setState({
165 | [target.name]: undefined,
166 | });
167 | } else if (!isNaN(parsedIntValue)) {
168 | this.setState({
169 | [target.name]: parsedIntValue,
170 | });
171 | }
172 | }
173 |
174 | handleFloatChange(evt) {
175 | const target = evt.target;
176 | const parsedFloatValue = parseFloat(target.value);
177 | if (target.value === '') {
178 | this.setState({
179 | [target.name]: undefined,
180 | });
181 | } else if (!isNaN(parsedFloatValue)) {
182 | this.setState({
183 | [target.name]: parsedFloatValue,
184 | });
185 | }
186 | }
187 |
188 | handleCustomNodeFnChange = evt => {
189 | const customNodeKey = evt.target.value;
190 |
191 | this.setState({ renderCustomNodeElement: customNodeFnMapping[customNodeKey].fn });
192 | };
193 |
194 | toggleCollapsible() {
195 | this.setState(prevState => ({ collapsible: !prevState.collapsible }));
196 | }
197 |
198 | toggleCollapseNeighborNodes = () => {
199 | this.setState(prevState => ({
200 | shouldCollapseNeighborNodes: !prevState.shouldCollapseNeighborNodes,
201 | }));
202 | };
203 |
204 | toggleZoomable() {
205 | this.setState(prevState => ({ zoomable: !prevState.zoomable }));
206 | }
207 |
208 | toggleDraggable() {
209 | this.setState(prevState => ({ draggable: !prevState.draggable }));
210 | }
211 |
212 | toggleCenterNodes() {
213 | if (this.state.dimensions !== undefined) {
214 | this.setState({
215 | dimensions: undefined,
216 | });
217 | } else {
218 | if (this.treeContainer) {
219 | const { width, height } = this.treeContainer.getBoundingClientRect();
220 | this.setState({
221 | dimensions: {
222 | width,
223 | height,
224 | },
225 | });
226 | }
227 | }
228 | }
229 |
230 | setScaleExtent(scaleExtent) {
231 | this.setState({ scaleExtent });
232 | }
233 |
234 | setSeparation(separation) {
235 | if (!isNaN(separation.siblings) && !isNaN(separation.nonSiblings)) {
236 | this.setState({ separation });
237 | }
238 | }
239 |
240 | setNodeSize(nodeSize) {
241 | if (!isNaN(nodeSize.x) && !isNaN(nodeSize.y)) {
242 | this.setState({ nodeSize });
243 | }
244 | }
245 |
246 | addChildNode = () => {
247 | const data = clone(this.state.data);
248 | const target = data[0].children ? data[0].children : data[0]._children;
249 | this.addedNodesCount++;
250 | target.push({
251 | name: `Inserted Node ${this.addedNodesCount}`,
252 | id: `inserted-node-${this.addedNodesCount}`,
253 | });
254 | this.setState({
255 | data,
256 | });
257 | };
258 |
259 | removeChildNode = () => {
260 | const data = clone(this.state.data);
261 | const target = data[0].children ? data[0].children : data[0]._children;
262 | target.pop();
263 | this.addedNodesCount--;
264 | this.setState({
265 | data,
266 | });
267 | };
268 |
269 | componentDidMount() {
270 | const dimensions = this.treeContainer.getBoundingClientRect();
271 | this.setState({
272 | translateX: dimensions.width / 2.5,
273 | translateY: dimensions.height / 2,
274 | });
275 | }
276 |
277 | render() {
278 | return (
279 |
6 |
7 |
8 | 
9 |
10 |
11 | 
12 |
13 |
14 | 
15 |
16 |
17 | 
18 |
19 |
20 | 
21 |
22 |
23 | 
24 |
25 |