Autolayout for nodes (divs) using jsPlumb

[OIivier Grossmann]

Hello,

 

so far I've defined the absolute position of the div layers manually. But I would highly appreciated if an autolayout (e.g. circular, orthogonal) could be applied, such that I do not longer need to calculate with absolute positions. Has anyone used a layout algorithm with jsPlumb so far? Any ideas how to layout the div layers in such a way that all div layers are visible and as less as possible connections are crossed?

 

Thanks in advance.

 

Regards,

Olivier

[OIivier Grossmann]

No one? I would highly appreciated to get some hints.

 

Thanks.

[Simon Porritt]

jsPlumb does not have layout functionality built in, although it has been requested a few times now. In theory you could use any code to run the layout since jsPlumb doesn't care where nodes are positioned.

What sort of dataset are you working with?  

[OIivier Grossmann]

I write javascript code from c# at server-side and send it to the client. The dataset is a datatable. I have googled for layout algorithms in javascript but couldnt find any.

Thx.

[Simon Porritt]

 But what sort of layout is natural for the dataset, though?  Is it hierarchical data?  Or do you need the orthogonal layout as you mentioned?

[OIivier Grossmann]

its like a social network map, therefore i need an orthogonal layout

[Simon Porritt]

I see.  So as I said, jsPlumb doesn't have layout functionality.  If googling doesn't help you then you may have to write your own.  But orthogonal layout is one of the trickiest. You might want to just try for a force directed layout first and see if you have any luck.

btw I saw your other question, about the drop down overlay.  I was about to answer it and got a little busy.  I'll update it shortly.

[Pat]

I am also interested in a layout engine for jsplumb. If you have server-side generation of your graph, you can use graphviz's (http://graphviz.org/) layout engines and map them to your graph before inputting it in jsplumb. However, I don't have the luxury of server-side apps, so I'm looking for a js-only layout engine.

[Pat]

We're not the only ones: http://stackoverflow.com/questions/12271687/javascript-graph-layout-engine

Apparently D3.js provides a layout engine. Here's an example: http://bl.ocks.org/4062045

[Jamie Tillman]

This is an old post, but just in case others find it, I'd recommend looking at "dagre".  It provides an automatic layout mechanism that can be linked to a diagramming library, in pure javascript:

https://github.com/cpettitt/dagre

[usm]

Hi,

Jamie have you tried linking it with jsPlumb?

[Anas Mosaad]

Hi Usm and everyone looking for a solution to the autolayout problem. I did the integration with dagre (as suggested by Jamie) and the code is published here http://onais-m.blogspot.com/2014/10/automatic-graph-layout-with-javascript.html

Please let me know your feedback.
Anas

[Mohammed Abdul Mateen]

Hi Anas Mosaad,

Thanks for a solution to the auto layout problem for jsPlumb, I've got a challenge that is, the alignment should start in the middle of the container (div) and not from the leftmost side.

Please suggest a solution.