Registry / web-framework / react-d3-tree

react-d3-tree

library3.6.6jsnpmunverified

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.

web-framework data

npm install react-d3-tree

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-D3-TREE

react-d3-tree

web-frameworkjavascriptv3.6.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Tree

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

✗ import { Tree } from 'react-d3-tree';

The primary component is a default export, not a named one.

TreeProps

✓ import type { TreeProps } from 'react-d3-tree';

Type import for the main component's props, useful for TypeScript projects.

RawNodeDatum

✓ import type { RawNodeDatum } from 'react-d3-tree';

Type import for the data structure used to define tree nodes.

This quickstart demonstrates how to render a basic organizational chart using the Tree component, providing data, setting orientation, initial translation, and path rendering style.

import React from 'react'; import Tree from 'react-d3-tree'; interface OrgChartNode { name: string; attributes?: { department?: string; [key: string]: any; }; children?: OrgChartNode[]; } const orgChartData: OrgChartNode = { 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 ( <div id="treeWrapper" style={{ width: '100%', height: '500px', border: '1px solid #ccc' }}> <Tree data={orgChartData} orientation="vertical" translate={{ x: 50, y: 100 }} nodeSize={{ x: 100, y: 100 }} separation={{ siblings: 1.5, nonSiblings: 1.5 }} pathFunc="step" /> </div> ); }

Debug

Known issues

breakingMajor 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.

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.

affects: >=2.0.0

gotchaThe `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.

fix

Provide explicit `width` and `height` CSS properties to the container element wrapping the `<Tree />` component, e.g., `<div style={{ width: '100%', height: '500px' }}>`.

affects: >=1.0.0

gotchaThere 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.

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.

affects: >=3.6.4

gotchaThe 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.

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.

affects: <3.6.4

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'layout')

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.

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.

Module not found: Error: Can't resolve 'react-d3-tree' in '...'

The package is not installed or the import path is incorrect.

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';`.

TS2307: Cannot find module 'react-d3-tree' or its corresponding type declarations.

TypeScript cannot find the type definitions for the package.

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.

Upgrade

Version history

3.6.6latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React applications. Supports React 16.x, 17.x, 18.x, and 19.x.

react-domrequiredPeer dependency for rendering React components to the DOM. Supports React 16.x, 17.x, 18.x, and 19.x.

@types/d3-hierarchyrequiredTypeScript 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.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/bkrem/react-d3-tree ↗

packagehttps://www.npmjs.com/package/react-d3-tree ↗

homepagehttps://react-d3-tree.com ↗