bumbeishvili
Bidirectional Org Chart ( Two Layouts at a time )
Hi
I am wanting to create a bidirectional org chart ( similar to a family tree), which has the root node at the center, its children below it and parents above it with each node having a fixed height and width. If I further expand my parent nodes they open upwards and if I open child node they open downwards.
In the org chart example that is posted (here),
-
If the layout is bottom : It opens the chart in bottom up direction ( upwards )
-
and if the layout is top : It opens the chart in top down direction (downwards)
what I aim to do is have both of these in one single chart and create something similar to this:
- with the yellow node being the root
- purple being the children
- green being the parent
- and a expand (+)/ collapse(-) icon to toggle between expanded states
How will be able to achieve this ? I tried multiple ways but am unable to attain this behaviour.......
Hi, it's not easily possible with this library, and not sure how to approach it at the moment
@bumbeishvili are there any algorithms / packages that can help me achieve this ?
@bumbeishvili , no worries, and thank you for your assistance.
If I use your codebase to achieve this behavior, I understand that I need to position the parent nodes at the top. Could you please guide me on which functions I should look into to make these changes?
I am guessing it will be along these lines
https://github.com/bumbeishvili/org-chart/blob/cb1f376656bc83360a4fea6872597fd427fcd775/src/d3-org-chart.js#L838-L848
That helps, @bumbeishvili!
In the meantime, I was browsing through some of your projects, and I find them truly amazing! But, I came across your secureLogic visualization, which is very similar to what I need.
If you see this chart is similar to an org chart but works in two directions (LR and RL) So if I reciprocate this chart, I can then make it TB and BT, add my custom nodes and voila!
Is that a good idea and is it possible? I would like your view and input on this ......
Yes, it's similar, as I remember I did it from scratch, instead of using this library, I don't exactly remember how I did it, but If I were to do it again, I'd use the same Flextree library, I'd probably just change the direction of some branches from positive to negative coordinates
https://observablehq.com/@bumbeishvili/horizontal-collapsible-d3-flextree
@bumbeishvili, I was finally able to achieve the chart I wanted. Thank you for your help !