{"id":11679,"library":"react-d3-tree","title":"React D3 Tree","description":"React D3 Tree is a JavaScript library providing a React component for visualizing hierarchical data as interactive tree graphs. It leverages D3.js's `tree` layout for efficient rendering and interactivity, making it suitable for representing structures like family trees, organizational charts, or file directories. The current stable version is 3.6.6. The project maintains an active release cadence with frequent minor updates and bug fixes. Key differentiators include its declarative React interface for D3-based trees, built-in zooming, panning, and node collapsing, and strong TypeScript support, enabling developers to integrate complex visualizations with minimal setup.","status":"active","version":"3.6.6","language":"javascript","source_language":"en","source_url":"https://github.com/bkrem/react-d3-tree","tags":["javascript","react","d3","tree","component","graph","svg","hierarchical-data","hierarchy","typescript"],"install":[{"cmd":"npm install react-d3-tree","lang":"bash","label":"npm"},{"cmd":"yarn add react-d3-tree","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-d3-tree","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications. Supports React 16.x, 17.x, 18.x, and 19.x.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM. Supports React 16.x, 17.x, 18.x, and 19.x.","package":"react-dom","optional":false},{"reason":"TypeScript typings for D3's hierarchy module, essential for type-safe usage of tree data structures. Explicitly maintained as a production dependency since v3.6.6 to prevent bundling issues.","package":"@types/d3-hierarchy","optional":false}],"imports":[{"note":"The primary component is a default export, not a named one.","wrong":"import { Tree } from 'react-d3-tree';","symbol":"Tree","correct":"import Tree from 'react-d3-tree';"},{"note":"Type import for the main component's props, useful for TypeScript projects.","symbol":"TreeProps","correct":"import type { TreeProps } from 'react-d3-tree';"},{"note":"Type import for the data structure used to define tree nodes.","symbol":"RawNodeDatum","correct":"import type { RawNodeDatum } from 'react-d3-tree';"}],"quickstart":{"code":"import React from 'react';\nimport Tree from 'react-d3-tree';\n\ninterface OrgChartNode {\n  name: string;\n  attributes?: {\n    department?: string;\n    [key: string]: any;\n  };\n  children?: OrgChartNode[];\n}\n\nconst orgChartData: OrgChartNode = {\n  name: 'CEO',\n  children: [\n    {\n      name: 'Manager',\n      attributes: { department: 'Production' },\n      children: [\n        {\n          name: 'Foreman',\n          attributes: { department: 'Fabrication' },\n          children: [{ name: 'Worker' }]\n        },\n        {\n          name: 'Foreman',\n          attributes: { department: 'Assembly' },\n          children: [{ name: 'Worker' }]\n        }\n      ]\n    }\n  ]\n};\n\nexport default function OrgChartTree() {\n  return (\n    <div id=\"treeWrapper\" style={{ width: '100%', height: '500px', border: '1px solid #ccc' }}>\n      <Tree \n        data={orgChartData} \n        orientation=\"vertical\"\n        translate={{ x: 50, y: 100 }} \n        nodeSize={{ x: 100, y: 100 }}\n        separation={{ siblings: 1.5, nonSiblings: 1.5 }}\n        pathFunc=\"step\"\n      />\n    </div>\n  );\n}","lang":"typescript","description":"This quickstart demonstrates how to render a basic organizational chart using the Tree component, providing data, setting orientation, initial translation, and path rendering style."},"warnings":[{"fix":"Refer to the v2 release notes (https://github.com/bkrem/react-d3-tree/releases/tag/v2.0.0) and the v3 API Documentation (https://bkrem.github.io/react-d3-tree/docs) for updated API usage.","message":"Major breaking changes occurred when upgrading from v1 to v2. Users migrating from v1 must consult the v2 release notes and API documentation for guidance, as prop names, data structures, and overall API surface have likely changed significantly.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Provide explicit `width` and `height` CSS properties to the container element wrapping the `<Tree />` component, e.g., `<div style={{ width: '100%', height: '500px' }}>`.","message":"The `Tree` component is designed to fill the width/height of its container. If the container does not have explicit dimensions, the tree may not render or appear correctly. Ensure the parent `div` or component has defined `width` and `height` styles.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure package managers (`npm`, `yarn`) resolve dependencies correctly. If issues persist, verify that `@bkrem/react-transition-group` is explicitly version 1.3.5 or later and `@types/d3-hierarchy` is installed as a production dependency.","message":"There have been reported issues with bundling, particularly concerning `@bkrem/react-transition-group` and `@types/d3-hierarchy` dependencies. Incorrect dependency resolution or bundling can lead to runtime errors or missing type definitions.","severity":"gotcha","affected_versions":">=3.6.4"},{"fix":"Upgrade to `react-d3-tree@3.6.4` or newer, which includes a patched version of `react-transition-group` to address these peer dependency conflicts.","message":"The component relies on `react-transition-group` for animations. In older versions, there were compatibility issues with `react-transition-group`'s peer dependencies, which could cause build failures.","severity":"gotcha","affected_versions":"<3.6.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `@types/d3-hierarchy` and `d3-hierarchy` (if used directly) are correctly installed and bundled. Check `package.json` and `node_modules` for consistency. Updating `react-d3-tree` to the latest version (v3.6.6+) may resolve this as it explicitly ensures `@types/d3-hierarchy` as a prod dep.","cause":"This error often occurs when D3's hierarchy layout functions are not correctly initialized or when the `d3-hierarchy` package is not properly available at runtime, potentially due to bundling or dependency issues.","error":"TypeError: Cannot read properties of undefined (reading 'layout')"},{"fix":"Run `npm install --save react-d3-tree` or `yarn add react-d3-tree`. Verify the import statement is `import Tree from 'react-d3-tree';`.","cause":"The package is not installed or the import path is incorrect.","error":"Module not found: Error: Can't resolve 'react-d3-tree' in '...'"},{"fix":"Ensure `react-d3-tree` is installed and that TypeScript is configured to include `node_modules/@types`. The package ships its own types, so this error might indicate an installation issue or an incorrect `tsconfig.json` setup.","cause":"TypeScript cannot find the type definitions for the package.","error":"TS2307: Cannot find module 'react-d3-tree' or its corresponding type declarations."}],"ecosystem":"npm"}