Paging not working

[NemanjaRCT]

Hi, I tried to recreate this example https://stackblitz.com/edit/js-pr15gr?file=index.html but I cannot make paging work, all nodes are rendered at once.

My code:

import { OrgChart } from 'd3-org-chart';
...
this.diagram = new OrgChart<DiagramNodeData>()
    .compact(false)
    .pagingStep(() => {
        console.log('pagingStep')
        return 5
    })
    .minPagingVisibleNodes(() => {
        console.log('minPagingVisibleNodes')
        return 3
    })
    .pagingButton((d: any, i, arr, state) => {
        console.log('pagingButton')
        const step = state.pagingStep(d.parent);
        const currentIndex = d.parent.data._pagingStep;
        const diff = d.parent.data._directSubordinatesPaging - currentIndex;
        const min = Math.min(diff, step);
        return `
            <div style="margin-top:50px;">
                <div style="display:flex;width:170px;border-radius:20px;padding:5px 15px; padding-bottom:4px;;background-color:#E5E9F2">
                    <div><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.59 7.41L10.18 12L5.59 16.59L7 18L13 12L7 6L5.59 7.41ZM16 6H18V18H16V6Z" fill="#716E7B" stroke="#716E7B"/>
                    </svg>
                    </div><div style="line-height:2"> Show next ${min}  nodes </div></div>
            </div>
        `;
    })
    .nodeId((node: any) => {
        ...
    })
    .parentNodeId((node: any) => node.ParentId)
    .nodeWidth(() => NODE_WIDTH)
    .nodeHeight((node: any) => node.data.nodeHeight || NODE_HEIGHT)
    .svgHeight(600)
    .nodeContent((node: any) => {
        ...
    })
    .linkUpdate(() => {...})
    .nodeUpdate((node: any, index: number, nodes: any) => {
        ...
    })
    .container('#diagram')
    .data(this.diagramData)
    .scaleExtent([0.65, 1.10])
    .render().fit({ scale: false })

this.diagram.setCentered(this.Id).render()

And in console I only got

Any ideas how to make it work?

[bumbeishvili]

@NemanjaRCT will you be able to produce an online sample with the issue reproduced?

[NemanjaRCT]

I tried here https://stackblitz.com/edit/angular-ivy-no224r?file=src%2Fapp%2Fd3-org-chart%2Fd3-org-chart.component.ts

[bumbeishvili]

@NemanjaRCT it was using old d3-org-chart library, latest one is 3.1.1 which has the paging support

https://stackblitz.com/edit/angular-ivy-vwwetp?file=src%2Fapp%2Fd3-org-chart%2Fd3-org-chart.component.ts,package.json