Bidirectional Org Chart ( Two Layouts at a time )

[bhavyakelp]

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.......

[bumbeishvili]

Hi, it's not easily possible with this library, and not sure how to approach it at the moment

[bhavyakelp]

@bumbeishvili are there any algorithms / packages that can help me achieve this ?

[bumbeishvili]

No idea

[bhavyakelp]

@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?

[bumbeishvili]

I am guessing it will be along these lines

org-chart/src/d3-org-chart.js

Lines 838 to 848 in cb1f376

	if (attrs.compact) {
	this.calculateCompactFlexDimensions(attrs.root);
	}
	// Assigns the x and y position for the nodes
	const treeData = attrs.flexTreeLayout(attrs.root);
	// Reassigns the x and y position for the based on the compact layout
	if (attrs.compact) {
	this.calculateCompactFlexPositions(attrs.root);
	}

[bhavyakelp]

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 ......

[bumbeishvili]

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

[bhavyakelp]

@bumbeishvili, I was finally able to achieve the chart I wanted. Thank you for your help !