React D3 Tree

Common errors

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

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

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

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

Warnings

• breaking 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.
  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.
• gotcha 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.
  Fix: Provide explicit `width` and `height` CSS properties to the container element wrapping the `<Tree />` component, e.g., `<div style={{ width: '100%', height: '500px' }}>`.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install react-d3-tree npm
• yarn add react-d3-tree yarn
• pnpm add react-d3-tree pnpm

Imports

• Tree
  wrong:

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

  correct:

  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.

Quickstart

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>
  );
}