Performance issue rendering large tree (~10,000 nodes) using d3-org-chart library

I’m using the d3-org-chart library in React to display a tree with around 10,000 nodes in my web application. The chart rendering is extremely slow, especially on lower-end machines, and the UI freezes during the rendering process.

Here is the code I am currently using:

    new OrgChart()
    .container(".chart-container")
    .data(data)
    .svgHeight(1200)
    .svgWidth(2000)
    .nodeWidth((d) => 250)
    .initialZoom(0.7)
    .firstDraw(firstDraw)
    .nodeHeight((d) => 250)
    .childrenMargin((d) => 90)
    .compactMarginBetween((d) => 60)
    .compactMarginPair((d) => 140)
    .expandAll(true)
    .compact(false).
    .render();

Nothing too complicated; it’s based on the examples provided in the documentation. However, rendering takes a long time, and during the process, the chart freezes.

Has anyone had similar performance issues when working with large datasets in d3-org-chart? What are some best practices or optimizations I can apply to improve performance and avoid freezing the UI?

Any advice would be appreciated!