{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-d3-tree"],"cli":null},"imports":["import Tree from 'react-d3-tree';","import type { TreeProps } from 'react-d3-tree';","import type { RawNodeDatum } from 'react-d3-tree';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}