Organize nodes on different levels in a radar-like chart | xyflow | Page 1

strange hollow Oct 22, 2024, 9:31 AM

#

Hello everyone! I need help/ideas with this specific feature. In this instance, nodes are connected with directed edges and form a forest of multiple trees. Roots will be on the level 0 (center of the chart), children of roots will be on the level 1 and so on... also need visible circles to indicate different levels. Draft Image attached for clarification.

round owl Oct 23, 2024, 10:51 AM

#

Hey @strange hollow, maybe you could look into a layout algorithm like this: https://observablehq.com/@d3/radial-tree-component

Observable

Radial tree component

D3’s tree layout implements the Reingold–Tilford “tidy” algorithm for constructing hierarchical node-link diagrams, improved to run in linear time by Buchheim et al. Tidy trees are typically more compact than cluster dendrograms, which place all leaves at the same level. See also the Cartesian variant.

strange hollow Oct 23, 2024, 11:00 AM

#

Thanks for the suggestion @round owl, I'll give it a try

west ravine Oct 23, 2024, 1:23 PM

#

It looks like Elk has a radial algo https://eclipse.dev/elk/reference/algorithms/org-eclipse-elk-radial.html which you can look at the docs on the reactflow website for how to integrate with elkjs.

I've also found ChatGPT / Github Copilot to be pretty good when it comes to helping with elkjs.

#Organize nodes on different levels in a radar-like chart