{"id":13563146,"url":"https://github.com/bkrem/react-d3-tree","last_synced_at":"2025-05-13T18:08:29.280Z","repository":{"id":18740373,"uuid":"85198497","full_name":"bkrem/react-d3-tree","owner":"bkrem","description":":deciduous_tree: React component to create interactive D3 tree graphs","archived":false,"fork":false,"pushed_at":"2025-02-28T04:41:05.000Z","size":13607,"stargazers_count":1144,"open_issues_count":146,"forks_count":280,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-04-25T15:48:36.096Z","etag":null,"topics":["chart","d3","d3-hierarchy","d3-tree","d3-visualization","graph","hierarchical-data","hierarchy","react","svg","tree","tree-graph","tree-graphs"],"latest_commit_sha":null,"homepage":"https://bkrem.github.io/react-d3-tree","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bkrem.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-16T13:22:44.000Z","updated_at":"2025-04-21T11:29:31.000Z","dependencies_parsed_at":"2024-01-19T11:33:59.737Z","dependency_job_id":"4d09e2f8-c753-4f37-8308-b949b109f5f9","html_url":"https://github.com/bkrem/react-d3-tree","commit_stats":{"total_commits":597,"total_committers":32,"mean_commits":18.65625,"dds":0.2328308207705193,"last_synced_commit":"7125aee79021ae72b8eb2c5e9299a98505354c2e"},"previous_names":[],"tags_count":85,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkrem%2Freact-d3-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkrem%2Freact-d3-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkrem%2Freact-d3-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bkrem%2Freact-d3-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bkrem","download_url":"https://codeload.github.com/bkrem/react-d3-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254000849,"owners_count":21997441,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","d3","d3-hierarchy","d3-tree","d3-visualization","graph","hierarchical-data","hierarchy","react","svg","tree","tree-graph","tree-graphs"],"created_at":"2024-08-01T13:01:15.615Z","updated_at":"2025-05-13T18:08:29.240Z","avatar_url":"https://github.com/bkrem.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReact D3 Tree\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#buildstatus\"\u003e\n    \u003cimg alt=\"build status\" src=\"https://github.com/bkrem/react-d3-tree/workflows/Build/badge.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://coveralls.io/github/bkrem/react-d3-tree?branch=master\"\u003e\n    \u003cimg alt=\"coverage status\" src=\"https://coveralls.io/repos/github/bkrem/react-d3-tree/badge.svg?branch=master\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-d3-tree\"\u003e\n    \u003cimg alt=\"npm package\" src=\"https://img.shields.io/npm/v/react-d3-tree?style=flat\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-d3-tree\"\u003e\n    \u003cimg alt=\"npm package: downloads monthly\" src=\"https://img.shields.io/npm/dm/react-d3-tree.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=react-d3-tree\"\u003e\n    \u003cimg alt=\"npm package: minzipped size\" src=\"https://img.shields.io/bundlephobia/minzip/react-d3-tree\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-d3-tree\"\u003e\n    \u003cimg alt=\"npm package: types\" src=\"https://img.shields.io/npm/types/react-d3-tree\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\"\u003e\n    \u003cimg alt=\"code style: prettier\" src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ch3 align=\"center\"\u003e\u003ca href=\"https://bkrem.github.io/react-d3-tree\"\u003e👾 Playground\u003c/a\u003e\u003c/h3\u003e\n  \u003ch3 align=\"center\"\u003e\u003ca href=\"https://bkrem.github.io/react-d3-tree/docs\"\u003e📖 API Documentation (v3)\u003c/a\u003e\u003c/h3\u003e\n\u003c/p\u003e\n\nReact 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.\n\n\u003e **Upgrading from v1? Check out the [v2 release notes](https://github.com/bkrem/react-d3-tree/releases/tag/v2.0.0).**\n\n\u003e **[Legacy v1 docs](https://github.com/bkrem/react-d3-tree/tree/v1)**\n\n## Contents \u003c!-- omit in toc --\u003e\n- [Installation](#installation)\n- [Usage](#usage)\n- [Props](#props)\n- [Working with the default Tree](#working-with-the-default-tree)\n  - [Providing `data`](#providing-data)\n  - [Styling Nodes](#styling-nodes)\n  - [Styling Links](#styling-links)\n  - [Event Handlers](#event-handlers)\n- [Customizing the Tree](#customizing-the-tree)\n  - [`renderCustomNodeElement`](#rendercustomnodeelement)\n  - [`pathFunc`](#pathfunc)\n    - [Providing your own `pathFunc`](#providing-your-own-pathfunc)\n- [Development](#development)\n  - [Setup](#setup)\n  - [Hot reloading](#hot-reloading)\n- [Contributors](#contributors)\n\n## Installation\n```bash\nnpm i --save react-d3-tree\n```\n\n## Usage\n```jsx\nimport React from 'react';\nimport Tree from 'react-d3-tree';\n\n// This is a simplified example of an org chart with a depth of 2.\n// Note how deeper levels are defined recursively via the `children` property.\nconst orgChart = {\n  name: 'CEO',\n  children: [\n    {\n      name: 'Manager',\n      attributes: {\n        department: 'Production',\n      },\n      children: [\n        {\n          name: 'Foreman',\n          attributes: {\n            department: 'Fabrication',\n          },\n          children: [\n            {\n              name: 'Worker',\n            },\n          ],\n        },\n        {\n          name: 'Foreman',\n          attributes: {\n            department: 'Assembly',\n          },\n          children: [\n            {\n              name: 'Worker',\n            },\n          ],\n        },\n      ],\n    },\n  ],\n};\n\nexport default function OrgChartTree() {\n  return (\n    // `\u003cTree /\u003e` will fill width/height of its container; in this case `#treeWrapper`.\n    \u003cdiv id=\"treeWrapper\" style={{ width: '50em', height: '20em' }}\u003e\n      \u003cTree data={orgChart} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Props\nFor 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).\n\nThe 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).\n\n## Working with the default Tree\n`react-d3-tree` provides default implementations for `Tree`'s nodes \u0026 links, which are intended to get you up \u0026 running with a working tree quickly. \n\nThis section is focused on explaining **how to provide data, styles and event handlers for the default `Tree` implementation**. \n\n\u003e Need more fine-grained control over how nodes \u0026 links appear/behave? Check out the [Customizing the Tree](#customizing-the-tree) section below.\n\n### Providing `data`\nBy 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):\n\n```ts\ninterface RawNodeDatum {\n  name: string;\n  attributes?: Record\u003cstring, string | number | boolean\u003e;\n  children?: RawNodeDatum[];\n}\n```\n\nThe `orgChart` example in the [Usage](#usage) section above is an example of this:\n\n- Every node has at least a `name`. This is rendered as the **node's primary label**.\n- Some nodes have `attributes` defined (the `CEO` node does not). **The key-value pairs in `attributes` are rendered as a list of secondary labels**.\n- Nodes can have further `RawNodeDatum` objects nested inside them via the `children` key, creating a hierarchy from which the tree graph can be generated.\n\n### Styling Nodes\n`Tree` provides the following props to style different types of nodes, all of which use an SVG `circle` by default:\n\n- `rootNodeClassName` - applied to the root node.\n- `branchNodeClassName` - applied to any node with 1+ children.\n- `leafNodeClassName` - applied to any node without children.\n\nTo visually distinguish these three types of nodes from each other by color, we could provide each with their own class:\n\n```css\n/* custom-tree.css */\n\n.node__root \u003e circle {\n  fill: red;\n}\n\n.node__branch \u003e circle {\n  fill: yellow;\n}\n\n.node__leaf \u003e circle {\n  fill: green;\n  /* Let's also make the radius of leaf nodes larger */\n  r: 40;\n}\n```\n\n```jsx\nimport React from 'react';\nimport Tree from 'react-d3-tree';\nimport './custom-tree.css';\n\n// ...\n\nexport default function StyledNodesTree() {\n  return (\n    \u003cdiv id=\"treeWrapper\" style={{ width: '50em', height: '20em' }}\u003e\n      \u003cTree\n        data={data}\n        rootNodeClassName=\"node__root\"\n        branchNodeClassName=\"node__branch\"\n        leafNodeClassName=\"node__leaf\"\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n \u003e 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).\n\n### Styling Links\n`Tree` provides the `pathClassFunc` property to pass additional classNames to every link to be rendered.\n\nEach link calls `pathClassFunc` with its own `TreeLinkDatum` and the tree's current `orientation`. `Tree` expects `pathClassFunc` to return a `className` string.\n\n```jsx\nfunction StyledLinksTree() {\n  const getDynamicPathClass = ({ source, target }, orientation) =\u003e {\n    if (!target.children) {\n      // Target node has no children -\u003e this link leads to a leaf node.\n      return 'link__to-leaf';\n    }\n\n    // Style it as a link connecting two branch nodes by default.\n    return 'link__to-branch';\n  };\n\n  return (\n    \u003cTree\n      data={data}\n      // Statically apply same className(s) to all links\n      pathClassFunc={() =\u003e 'custom-link'}\n      // Want to apply multiple static classes? `Array.join` is your friend :)\n      pathClassFunc={() =\u003e ['custom-link', 'extra-custom-link'].join(' ')}\n      // Dynamically determine which `className` to pass based on the link's properties.\n      pathClassFunc={getDynamicPathClass}\n    /\u003e\n  );\n}\n```\n\n\u003e For more details, see the `PathClassFunction` [reference docs](https://bkrem.github.io/react-d3-tree/docs/modules/_src_types_common_.html#pathclassfunction).\n\n### Event Handlers\n`Tree` exposes the following event handler callbacks by default:\n\n- [onLinkClick](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_tree_types_.treeprops.html#onlinkclick)\n- [onLinkMouseOut](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_tree_types_.treeprops.html#onlinkmouseout)\n- [onLinkMouseOver](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src__tree_types_.treeprops.html#onlinkmouseover)\n- [onNodeClick](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_tree_types_.treeprops.html#onnodeclick)\n- [onNodeMouseOut](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_tree_types_.treeprops.html#onnodemouseout)\n- [onNodeMouseOver](https://bkrem.github.io/react-d3-tree/docs/interfaces/_src_tree_types_.treeprops.html#onnodemouseover)\n\n\u003e **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`.  \n\u003e `onNodeClick` will still fire, but it will not change the target node's expanded/collapsed state.\n\n## Customizing the Tree\n\u003c!-- Using the `\u003cnodeType\u003eNodeClassName` and `pathClassFunc` approaches above should give  --\u003e\n\n### `renderCustomNodeElement`\nThe [`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.**\n\nCases where you may find rendering your own `Node` element useful include:\n\n- Using a **different SVG tag for your nodes** (instead of the default `\u003ccircle\u003e`) - [Example (codesandbox.io)](https://codesandbox.io/s/rd3t-v2-custom-svg-tag-1bq1e?file=/src/App.js)\n- 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)\n- Building **richer \u0026 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)\n\n### `pathFunc`\nThe [`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`.\n\nBy 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.\n\nThe currently [available enums](https://bkrem.github.io/react-d3-tree/docs/modules/_src_types_common_.html#pathfunctionoption) are:\n- `diagonal` (default)\n- `elbow`\n- `straight`\n- `step`\n\n\u003e Want to see how each option looks? [Try them out on the playground](https://bkrem.github.io/react-d3-tree).\n\n#### Providing your own `pathFunc`\nIf none of the available path functions suit your needs, you're also able to provide a custom `PathFunction`:\n\n```jsx\nfunction CustomPathFuncTree() {\n  const straightPathFunc = (linkDatum, orientation) =\u003e {\n    const { source, target } = linkDatum;\n    return orientation === 'horizontal'\n      ? `M${source.y},${source.x}L${target.y},${target.x}`\n      : `M${source.x},${source.y}L${target.x},${target.y}`;\n  };\n\n  return (\n    \u003cTree\n      data={data}\n      // Passing `straight` function as a custom `PathFunction`.\n      pathFunc={straightPathFunc}\n    /\u003e\n  );\n}\n```\n\n\u003e For more details, see the [`PathFunction` reference docs](https://bkrem.github.io/react-d3-tree/docs/modules/_types_common_.html#pathfunction).\n\n## Development\n### Setup\nTo set up `react-d3-tree` for local development, clone the repo and follow the steps below:\n\n```bash\n# 1. Set up the library, create a reference to it for symlinking.\ncd react-d3-tree\nnpm i\nnpm link\n\n# 2. Set up the demo/playground, symlink to the local copy of `react-d3-tree`.\ncd demo\nnpm i\nnpm link react-d3-tree\n```\n\n\u003e **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 :)\n\n### Hot reloading\n```bash\nnpm run build:watch\n```\n\nIf you're using `react-d3-tree/demo` for development, open up another terminal window in the `demo` directory and call:\n```bash\nnpm start\n```\n\n## Contributors\nA 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkrem%2Freact-d3-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbkrem%2Freact-d3-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkrem%2Freact-d3-tree/lists"}