Hierarchical Layout Algorithm

[atillaaliyev]

Introduction

Hi,
I will make project about EOD tree (End of days Job) . This EOD tree is watched by a team everyday. There are a lot of jobs that are related each other. I want to make this;
EOD09062021.pdf

I will give nodes and edges and the library will export meaningful output like above. I have found some library like this; https://www.yworks.com/demos/showcase/layoutstyles/?layout=hierarchic&sample=hierarchic

However, I want to learn, can I make this with JOINT. I have reviewed all demos but i did not find.
Thanks,

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS, JointJS+

[kumilingus]

If you need parallel orthogonal links, you will need to use a 3rd party library to position the nodes and route the links:

• MSAGLJS: https://microsoft.github.io/msagljs/
• ELKJS: https://github.com/kieler/elkjs

MSAGL example:
https://codepen.io/jointjs/pen/zYQQZpg/c2f18bb13f4bbd41c4ade3a8b50540ef

ELK examples:
https://www.jointjs.com/demos/eclipse-kernel-layout

[kumilingus]

Could you please explain why you think these two layouts do not meet your expectations? Perhaps there is a configuration that can be used to modify the output (some screenshots would be awesome).

Note that there is no such thing as the best coordinates. Each use case / application may require a different layout.

I don't know of any other library that I can recommend that can be compared to the ones already mentioned.

[atillaaliyev]

Hi @kumilingus ,
Sorry my late answer.
I share elk ve msagl example for my case;

https://codesandbox.io/p/sandbox/elk-msagl-example-v74pg6

And this is yfiles screenshot. It is more clear and readable. I talked about this algorithm.

[kumilingus]

Thank you for the live examples.

The links from the yFiles examples are not orthogonal. If this is not a requirement, you can also look at the DirectedGraph layout, have you looked?

[atillaaliyev]

Yes, I had tried before. However, the result was unsuccessful.

https://codesandbox.io/p/sandbox/winter-browser-ft9z8c

[kumilingus]

This is the result of DirectedGraph for reference (after I moved the link anchors to the bottom/top):

https://codesandbox.io/p/sandbox/great-mirzakhani-ddd4wv

If this doesn't work for you either (and both examples use the same dataset), I can't recommend any other open-source library at this time.