search

tgdwyer / WebCola

Javascript constraint-based graph layout
http://marvl.infotech.monash.edu/webcola/
MIT License
2.02k stars 258 forks source link

Layout for nodes without links #75

Closed hsuh closed 9 years ago

hsuh commented 9 years ago

This is not a code issue (just seeking advice) but I'm not really sure how to contact you (Tim) by not spamming your inbox so here it is.

As you can see on the screenshot, nodes without links are laid out in a "grid like" manner. Can you let me know how this can be changed so that they are distributed on the screen more randomly with nice gaps instead of a grid?

screenshot from 2015-02-14 13 44 42

tgdwyer commented 9 years ago

Those are some nice looking curvy edges! As for the disconnected nodes, we go to quite a bit of trouble to place them on such a grid :-). Basically, the algorithm lays out the components of the graph separately, then packs them greedily from left-to-right, with a kind of wrapping flow layout.

I'm thinking from your comment though, that you want something more like what the d3 force layout does with its "gravity" force. The "gravity" force causes all the singleton nodes to "orbit" around the other components somewhat organically. hmmm... I think to do that with cola we would need a new packing algorithm... there would be plenty of options.

Actually, you might be able to get a nice effect with d3's circle packing. The process would be to replace the call to applyPacking in adaptor.js with a new function that places the components inside circles and uses d3's circle packing to pack them.

What do you think?

hsuh commented 9 years ago

Thanks. I can try the circle packing. I started using Webcola because when there are many nodes d3 force layout does not scale well. I want something calm and visually pleasing at the same time. Something like what sigmajs would produce. I don't use signmajs because I do a lot of operations on nodes and d3 is fantastic for that.

tgdwyer commented 9 years ago

let me know how you go with the circle packing. If it works well maybe we can add it as an option in d3adaptor.ts ...