How to properly implement OrgChart in React/NextJS.

[jrso15]

Hello,

I’m currently trying to implement OrgChart in d3-org-chart but I’m getting OrgChart is not a constructor. I can’t find any solution for this. can someone please help me?

Here’s sample of my code:

import React, { useRef } from "react";
import dynamic from "next/dynamic";
import styles from "@/styles/OrganizationChart.module.scss";

const OrgChart = dynamic(
  () =>
    import("d3-org-chart").then((mod) => {
      console.log(mod); 
      return mod.OrgChart;
    }),
  { ssr: false }
);

const OrganizationChart = ({ organizationItemData, onNodeClick }) => {
  const d3Container = useRef(null);
  const chartRef = useRef(null);

  // Initialize the chart directly in the render function if the container is ready
  if (organizationItemData && d3Container.current && !chartRef.current) {
    chartRef.current = new OrgChart(); // Adjust this based on the module structure

    chartRef.current
      .container(d3Container.current)
      .data(organizationItemData)
      .nodeWidth(() => 200)
      .nodeHeight(() => 120)
      .onNodeClick((d) => {
        console.log(d, "Id of clicked node ");
        onNodeClick(d);
      })
      .render();
  }

  return (
    <div className={styles.orgWrapper}>
      <div ref={d3Container} />
    </div>
  );
};

export default OrganizationChart;

Thanks in advance!

[bumbeishvili]

Hi, there is a react integration sample.

Was not it useful?

1. https://github.com/bumbeishvili/org-chart?tab=readme-ov-file#featured-customizations
2. https://stackblitz.com/edit/d3-org-chart-react-integration-hooks?file=OrgChart.js

I also wrote a general guide about the integration of d3 visualization (check out the integration section), it might be useful

https://medium.com/@bumbeishvili/best-d3-coding-convention-subjective-practice-proven-through-years-of-work-03c521715b05

[jrso15]

Hi Bumbeishviili,

I followed some of your documentation.

And this is exactly what I’m getting:

And I can’t find any solution for this.

I want to implement something like this:

https://stackblitz.com/edit/d3-org-chart-react-integration-hooks-topjz5?file=index.js

[jrso15]

Hi Bumbeishvili! I finally able to find the issue and it’s working now.

I have one more question, for JSON data what’s the sample structure for it, do you have one that I can follow? all I can see is csv data example. because it’s not showing the children per person.

Hope you can help me! Thank you in advance!🙏

sample data:

{ "name": "test name", "level": 1, "is_manager": "y", "title": "INGENIEUR SI", "manager": { "name": "test name", "level": 0, "is_manager": "y", "title": "REGIONAL DIRECTOR", "manager": null, "expanded": false, "image": "", "children": null }, "expanded": true, "image": "", "children": [ { "name": "test", "level": 2, "is_manager": "n", "title": "SERVICE PROVIDER FOR OTHER DOMAINS", "manager": null, "expanded": false, "image": "", "children": [] }, { "name": "first name", "level": 2, "is_manager": "n", "title": "INGENIEUR SI", "manager": null, "expanded": false, "image": "", "children": [] }, { "name": "first name", "level": 2, "is_manager": "n", "title": "INGENIEUR SI", "manager": null, "expanded": false, "image": "", "children": [] }, ] }

[bumbeishvili]

It does not have a specific structure.

The only thing necessary is to be able to tell hierarchy, for that default id and parentId or nodeId and parentNodeId is checked (which you can also override)

There is one JSON sample here - https://github.com/bumbeishvili/org-chart?tab=readme-ov-file#features

But again, it does not matter what structure you have as long as you have a hierarchy extractable. Also, you can't have multiple roots, so be aware of that

[jrso15]

Thank you!❤️