Open NemanjaRCT opened 5 months ago
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?
@NemanjaRCT will you be able to produce an online sample with the issue reproduced?
I tried here https://stackblitz.com/edit/angular-ivy-no224r?file=src%2Fapp%2Fd3-org-chart%2Fd3-org-chart.component.ts
@NemanjaRCT it was using old d3-org-chart library, latest one is 3.1.1 which has the paging support
3.1.1
https://stackblitz.com/edit/angular-ivy-vwwetp?file=src%2Fapp%2Fd3-org-chart%2Fd3-org-chart.component.ts,package.json
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:
And in console I only got![image](https://github.com/bumbeishvili/org-chart/assets/163058588/4ad596bc-e666-4eb4-bf19-37aa2be4e654)
Any ideas how to make it work?