Error and not visualise the chart

[ScorpQ]

I wrote the code with follow the react based chart codes but i does not work, i cant find what is the problem. I have to fix this case.

import React, { useState, useLayoutEffect, useRef, useEffect } from 'react';
import { OrgChart } from 'd3-org-chart';
import { Input, Button, Row, Col, Typography, Modal } from 'antd';

const OrgChartModal = (props) => {

    const d3Container = useRef(null);
    // const [chart, setChart] = useState(null);
    let chart = null;
    const [index, setIndex] = useState(0);

    function filterChart(e) {
        const value = e.currentTarget.value;

        chart.clearHighlighting();

        const data = chart.data();

        data.forEach((d) => (d._expanded = false));

        data.forEach((d) => {
            if (value != '' && d.full_name.toLowerCase().includes(value.toLowerCase())) {
                d._highlighted = true;
                d._expanded = true;
            }
        });

        chart.data(data).render().fit();
    }

    useEffect(() => {
        if (!chart) {
            // setChart(new OrgChart());
            chart = new OrgChart()
        }
    }, [chart]);

    useLayoutEffect(() => {
        if (props.data && chart) {
            const updateChart = () => {
                chart.container('.chart-container')
                    .data(props.data)
                    .nodeHeight((d) => 83)
                    .nodeWidth((d) => 350)
                    .childrenMargin((d) => 100)
                    .nodeContent(function (d, i, arr, state) {
                        const containerStyle = `
                            display: flex;
                            flex-direction: row; /* Change to row for horizontal layout */
                            align-items: center;
                            justify-content: space-between;
                            background-color: #fff;
                            border-radius: 10px;
                            border: 1px solid #ddd;
                            padding: 5px;
                            font-size: 12px;
                            font-weight: bold;
                            box-shadow: 2px 2px 2px #ccc;
                            width: 300px;
                            height: 83px;
                            margin: 10px;
                            text-align: center;
                            font-family: mecellem_bold;
                            color: #08011E;
                            position: relative`;

                        const imageStyle = `
                                border-radius: 100px;
                                width: 40px;
                                height: 40px;
                                margin-right: 30px;
                                margin-left: 30px`;

                        const badgeStyle = `
                            width: 150px;
                            font-weight: bold;
                            background-color: #1d8efb;
                            color: #fff;
                            border-radius: 5px;
                            padding: 10px 20px;
                            font-size: 12px;
                            position: absolute;
                            top: -20px;
                            left: -20px;
                        `;

                        return `<div class="person" style="${containerStyle}">
                                    {console.log(d)}
                                    <div class="badge-org-chart" style="${badgeStyle}">${d.data.title}</div>
                                    <div style="display: flex; align-items: center;">
                                        <img style="${imageStyle}" src="${d.data.profile_photo_url}" alt="User" />
                                        <p style="font-size: 20px; color: #08011E; font-weight: bold;  padding-top: 15px">${d.data.full_name}</p>
                                    </div>
                                </div>`;
                    })
                    .compact(false)
                    .render();
            };

            updateChart();
        }
    }, [props.data, chart]);

    const handleSwapLayout = () => {
        if (chart) {
            setIndex((prevIndex) => (prevIndex + 1) % 4);
            chart.layout(["right", "bottom", "left", "top"][index]).render().fit();

            const positionIndex = index % 4;

            let height;
            switch (positionIndex) {
                case 0:
                    height = 90;
                    break;
                case 1:
                    height = 90;
                    break;
                case 2:
                    height = 100;
                    break;
                case 3:
                    height = 82;
                    break;
                default:
                    height = 82;
            }

            chart.nodeHeight((d) => height).render().fit();
        }
    };

    const handleExpandAll = () => {
        if (chart) {
            chart.expandAll().render().fit();
        }
    };

    const handleCollapseAll = () => {
        if (chart) {
            chart.collapseAll().render().fit();
        }
    };

    return (
        <>
                <Row>
                    <Col span={16} style={{ display: 'flex', flexDirection: 'row'}}>
                        <Input style={{ width: '90%'}} type="search" placeholder={"Arama..."} onChange={(event) => filterChart(event)} />
                    </Col>
                    <Col span={8} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
                        <Button style={{borderColor: '#1890ff' }} onClick={handleSwapLayout}>
                            Yönü Değiştir
                        </Button>
                        <Button style={{borderColor: '#1890ff' }} onClick={handleExpandAll}>
                            Tümünü Aç
                        </Button>
                        <Button style={{borderColor: '#f5222d' }} onClick={handleCollapseAll}>
                            Tümünü Küçült
                        </Button>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <div className="chart-container"></div>
                    </Col>
                </Row>
        </>
    );
};

export default OrgChartModal;

[bumbeishvili]

I don't think that d3Container is used

[ScorpQ]

Where do you think i should use them? I'm bit confused and can't figure it out. Also thank you very much for response!
Could you please write a little more explanatory?

[bumbeishvili]

It should be chart.container(d3Container), which also has to be referenced in dom.

Sorry, but you will need to spend some time understanding how the react integration works.

Otherwise, you might face additional issues

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

You can also look into this medium article

https://medium.com/p/03c521715b05

particularly Integration => react section

[ScorpQ]

Thank you for responding! I will work on this case throughout the day. I will let you know result.

[ScorpQ]

Is there any idea?

[bumbeishvili]

Looks like the node with ID 987801 is missing.

[ScorpQ]

Is this about d3-library or data retrieved from backend? Where should i focus my attention?