Pagination /showing fixed number of nodes in each level

[venky18]

Hi I am using the older version of this project link. but if a node has 40-50 children the view gets cluttered an you have to scroll left/right too much.

I was wondering if there is an easy way to shown "n" number of nodes on each level and will have previous next button to show the next n.

from my understanding this isn't currently implemented in the code right now, so I am looking for any pointers / previous work to start.

[bumbeishvili]

@venky18 I plan to add compact layout option

You can track it in #14 (Note, I am not sure about time frame, it could be done be within a month, or within 2 years)

Much like the image below. It's a pretty complex algorithm, so I can't give you an exact pointer.

[venky18]

@bumbeishvili Looks interesting but don't you think in the current gif user attention moves left and right? like when you click on office of the deputy under Secretary it moves out of the screen and you have to move the window.

Lets say there are 50 people under 1 person it will be too long to show in the window.

Also just for reference I found only one example on what i was looking earlier. Currently it's not visually appealing but that can be improved.

Let me know your thoughts.

I am still understanding d3 stuff but will be happy to contribute to this feature or the compact layout one(if that can be modified slightly to serve the use-case I am aiming to implement) with some guidance/help.

[bumbeishvili]

I see. That's an interesting concept.

I will keep this issue alive since other people also requested a similar feature. It won't be implemented for v2, but I'll keep it into account for future improvements. (I am trying it to be simple, yet flexible )

Regarding current issue - linked code is d3.js based as well, so you may be able to incorporate relevant changes into your code, but please be aware that linked jsfiddle uses d3.v3, current repo is based on d3.v5, so there will be some differences.

I am still understanding d3 stuff but will be happy to contribute to this feature or the compact layout one(if that can be modified slightly to serve the use-case I am aiming to implement) with some guidance/help.

For now, contributions are mainly limited to fixing simple issues (like null reference errors for edge cases e.t.c ). If you will be able to implement changes, then just link JSFIDDLE example here and I'll take a look at it when I decide to implement a similar feature in the future. It may offer me some help. Unfortunately, I can't offer any guidance/help to you, since I am also working on my projects and I have very limited availability, hope you will understand

[bumbeishvili]

@venky18 - In the new version which is already released, by default chart is centered around active node[s]

[bumbeishvili]

Currently, I am implementing the paging functionality like this

It will work like this:

1. You will need to set the paging step using chart.pagingStep(d=>4) (default will be Infinity), a minimum will be 2
2. You will need to override the content for chart.pagingNodeContent(d=> 'Display Additional 4 nodes')

After the user clicks this paging button, the chart will automatically increase the paging step for the parent and redraw the content, meaning additional nodes will appear

[bumbeishvili]

Video of how pagination will work

https://user-images.githubusercontent.com/6873202/169758544-707b9ae9-2e17-46a9-9e8a-7b1be58ef334.mp4

[mike818148]

Hello @bumbeishvili,

First of all, I must say many thanks to you for such great feature! And we also have similar problem as mentioned above, and I think you have already provide a great design here for pagination. May I ask is this already included in one of the release? or still not yet released?

Thanks and regards, Mike

[bumbeishvili]

Hi Mike, it's not included. It's not in the development branch yet, it's just on my radar for the next set of updates, not sure when, it depends on my availability and at this point I am not available

[mike818148]

Hello @bumbeishvili,

No problem. Again thanks for the great work. Looking forward to have this in the feature release.

[andychin7777]

hi, thought I'd jump on this train as well,

love what you have done with the show more nodes button, but it still ends up hard to view in the end if there is large group of nodes

in compact view the chart it a little more easier to look at but it still only squashes the problem in half, if there are still to many nodes to be shown at once, they are only just shown side by side.

it would be nice to be able to increase the number of children that can be displayed side by side, e.g. instead of 2 side by side, a setting value that we can set to 4 or 6 side by side. (or dynamically based on children number count function that can be passed in) the lines will have to change though and it might be too complicated to code, but just a feature request

Cheers,

[bumbeishvili]

There is a new layout proposal, which will improve node placement, although this is a long term plan

https://github.com/bumbeishvili/org-chart/issues/236