Fork of D3 org chart generator

Adding the D3 Organization Chart to Your React TSX Project

Here's how to manually add this D3 organization chart to your existing React TypeScript project:

Step 1: Install Required Dependencies

First, install the necessary dependencies:

npm install d3 jspdf
# or
yarn add d3 jspdf

Also install the TypeScript types for D3:

npm install --save-dev @types/d3
# or
yarn add --save-dev @types/d3

Step 2: Create the Files

Create two files in your project:

org-chart.tsx - The main component with all the D3 chart logic
A page component that will use the org chart (e.g., pages/org-chart-page.tsx)

Step 3: Copy the Code

Copy the code from the provided files:

Copy the entire content of org-chart.tsx into your newly created file with the same name
Create a simple page component that imports and uses the OrgChart component:

import OrgChart from "../path/to/org-chart"

export default function OrgChartPage() {
  return (
    <div className="w-full py-8">
      <h1 className="text-3xl font-bold mb-6 text-center">D3 Organization Chart</h1>
      <OrgChart />
    </div>
  )
}

Step 4: Add Tailwind CSS Classes (if using Tailwind)

If your project uses Tailwind CSS, you're all set. If not, you'll need to create equivalent CSS styles for the classes used in the component, such as:

/* Add this to your CSS file if not using Tailwind */
.border-gray-200 { border-color: #e5e7eb; }
.rounded-lg { border-radius: 0.5rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
/* ... and so on for other Tailwind classes used */

Step 5: Import and Use the Component

Import the OrgChart component wherever you want to use it:

import OrgChart from "../path/to/org-chart"

function YourComponent() {
  return (
    <div>
      <h2>Your Organization Structure</h2>
      <OrgChart />
    </div>
  )
}

Step 6: Customize the Data (Optional)

The chart currently uses randomly generated data. To use your own data, modify the generateLargeTree function or replace it with your own data structure that follows the TreeNode interface:

// Example of providing custom data instead of using generateLargeTree
const myOrgData: TreeNode = {
  id: "1",
  name: "CEO",
  shape: "circle",
  radius: 40,
  color: "#4f46e5",
  role: "Chief Executive Officer",
  department: "Executive",
  children: [
    {
      id: "2",
      name: "CTO",
      shape: "rect",
      width: 80,
      height: 50,
      color: "#0ea5e9",
      role: "Chief Technology Officer",
      department: "Technology",
      children: [
        // Add more nodes here
      ]
    },
    // Add more direct reports
  ]
};

// Then use this data instead of calling generateLargeTree
// Replace this line in org-chart.tsx:
// const treeData: TreeNode = generateLargeTree(100);
// With:
// const treeData: TreeNode = myOrgData;

Troubleshooting

If you encounter any issues:

TypeScript errors: Make sure you have the correct type definitions installed
D3 rendering issues: Check that your container has proper dimensions and that the SVG is visible
PDF export not working: Ensure jsPDF is properly installed and imported

The component is designed to be responsive and should work in most modern React applications with TypeScript support.