I am trying to visualize the anization chart of our company, but there is a part that I have difficulty with and that is grouping. Since Reactflow sells this feature for a fee, I need to develop it myself.

I can place the nodes hierarchically and flexibly according to their size. The problem is that I have a hard time developing a development that includes the children of the parent nodes, I could not develop the algorithm. I asked the AI many times but it could not solve it.

Challenge: Parent nodes should be large and high enough to encompass all pedigrees, while at the same time keeping the hierarchical order intact.

DEMO Code

What I Want ->

What I did

I am trying to visualize the anization chart of our company, but there is a part that I have difficulty with and that is grouping. Since Reactflow sells this feature for a fee, I need to develop it myself.

I can place the nodes hierarchically and flexibly according to their size. The problem is that I have a hard time developing a development that includes the children of the parent nodes, I could not develop the algorithm. I asked the AI many times but it could not solve it.

Challenge: Parent nodes should be large and high enough to encompass all pedigrees, while at the same time keeping the hierarchical order intact.

DEMO Code

https://codesandbox.io/p/sandbox/dynamic-group-ddn2ts

What I Want ->

What I did

• javascript
• reactjs
• d3.js
• tree
• react-flow

1 Answer 1

Are you looking for something like this:

You can achieve the above grouped layout with Sub Flows.

Please check this Stackblitz demo.

Below I've given the nodes and edges configuration of the above demo:

const initialNodes = [
  {
    id: '1',
    type: 'input',
    data: { label: 'Board of Directors' },
    position: { x: 0, y: 0 },
    style: {
      backgroundColor: 'rgba(255, 0, 115, 0.05)',
      width: 570,
      height: 440,
      justifyContent: 'flex-start',
      fontWeight: 'bold',
    },
  },
  {
    id: '2',
    data: { label: 'Information Processing Coordinatorship' },
    position: { x: 20, y: 40 },
    style: {
      backgroundColor: 'rgba(188, 235, 215, 0.5)',
      width: 530,
      height: 380,
      justifyContent: 'flex-start',
      fontWeight: 'bold',
    },
  },
  {
    id: '2a',
    data: { label: 'Coordinator' },
    position: { x: 180, y: 35 },
    parentId: '2',
    extennt: 'parent',
  },
  {
    id: '2a1',
    data: { label: 'Secretary' },
    position: { x: 70, y: 85 },
    parentId: '2',
    extennt: 'parent',
  },
  {
    id: '2a2',
    data: { label: 'Business Analysis and Development Department' },
    position: { x: 220, y: 125 },
    style: {
      backgroundColor: 'rgba(123,159,242, 0.45)',
      width: 300,
      height: 240,
      justifyContent: 'flex-start',
      fontWeight: 'bold',
    },
    parentId: '2',
  },
  {
    id: '2a2a',
    data: { label: 'Business Analysis and Development Department Manager' },
    position: { x: 80, y: 40 },
    parentId: '2a2',
    extennt: 'parent',
  },
  {
    id: '2a2b',
    data: { label: 'Business Analysis and Development Specialist' },
    position: { x: 10, y: 115 },
    parentId: '2a2',
    extennt: 'parent',
  },
  {
    id: '2a2c',
    data: { label: 'Business Analysis and Development Assistant Specialist' },
    position: { x: 130, y: 170 },
    parentId: '2a2',
    extennt: 'parent',
  },
  {
    id: '3',
    data: { label: 'Software Development Department' },
    position: { x: 40, y: 185 },
    style: {
      backgroundColor: 'rgba(123,159,242, 0.45)',
      width: 180,
      height: 200,
      justifyContent: 'flex-start',
      fontWeight: 'bold',
    },
  },
  {
    id: '3a',
    data: { label: 'Software Development Department Manager' },
    position: { x: 15, y: 50 },
    parentId: '3',
    extent: 'parent',
  },
  {
    id: '3a1',
    data: { label: 'Software Development Specialist' },
    position: { x: 15, y: 130 },
    parentId: '3',
    extent: 'parent',
  },
];

const initialEdges = [
  { id: 'e1', source: '2a', target: '2a1' },
  { id: 'e2', source: '2a', target: '2a2' },
  { id: 'e3', source: '2a2a', target: '2a2b' },
  { id: 'e4', source: '2a2a', target: '2a2c' },
  { id: 'e5', source: '3a', target: '3a1' },
];