The changes made by me (Yassine JEBLI)

Fixed undefined children issue in line 941 (occurs when toggling on children)
Updated onNodeClick handler to make it return the whole data object (not just node id) to its caller (Line 609).

D3 v5 organization chart

Highly customizable org chart built with d3 v5.

Check out examples

Check out several libraries and frameworks integrations

Custom components & algorithms I used

Curved edges - observablehq playground

Installing

npm i d3-org-chart

Docs

Weak Wiki

Usage

const TreeChart = require ('https://bundle.run/d3-org-chart@1.0.4');


new TreeChart()
   .container(<myDOMElement>)
   .data(<myData>)
   .svgWidth(700)
   .initialZoom(0.4)
   .onNodeClick(d=> console.log(node clicked', {d}))
   .render()

Notes & appreciations

I created this org-chart when I was hired by TeamApps.

Although this Org chart was specifically created for teamapps java web application framework , it's very flexible and can be used in any environment, where d3 and DOM is accessible.

Big thanks to Matthias and Yann, who assembled requirements for org-chart and had valuable pieces of advice afterwads.

Author

David B (twitter)
David B (linkedin)

I am available for freelance data visualization work. Please contact me in case you'd like me to help you with my experience and expertise