@ferdydh/d3-org-chart

Customizable organization chart, based on d3 v7

This repo is a fork from d3-org-chart by David B(twitter and LinkedIn). Our ultimate goal is to integrate typescript and react natively into the library, fix reported issues, improve customization, and provide better documentation.

Installing

npm i @ferdydh/d3-org-chart

import { OrgChart } from '@ferdydh/d3-org-chart';

type Props = {
     data: DataType[]
}

type DataType = {
     id: string | number // required property
     parentId: string | number // required property
}

export const OrgChartComponent = ({ data }: Props) => {
  const container = useRef(null);

  useEffect(() => {
    if (fields && container.current) {
      const chart = new OrgChart<DataType>()
        .container(container.current)
        .data(fields)
        .render();
    }
  }, [fields, container.current]);

  return (
    <div>
      <div ref={container} />
    </div>
  );
};

Featured:

Custom components & algorithms used

• Curved edges - vertical
• Curved edges - horizontal
• Flextree Algorithm

Author

Ferdy DH