tgdwyer / WebCola

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

Hi I have some question about avoidOverlaps #110

Closed zjubirdfly closed 9 years ago

zjubirdfly commented 9 years ago

Hi WebCola Team:

I was wondering which method do you use to avoid overlaps. By Fruchterman Reingold method? Or something else? Because I cannot check your method in your sourced code.

Thank you.

zjubirdfly commented 9 years ago

BTW, could you tell me the limit sum of edges and nodes by this layout? How about more than 500 edges and 600 buses or more?

Thank you.

tgdwyer commented 9 years ago

Our overlap removal method is described in this paper and actually that forms the basis of the solver method used within the iterative layout, as per this paper.

Actually, the layout method as used in webcola has evolved quite a bit since then. See my more recent papers if you are interested.

You can invoke the overlap removal for a set of rectangles directly with this method. Used in that way (just to remove overlaps while displacing the rectangles as little as possible) it should scale to thousands of rectangles.

The full network layout, however, is iteratively computing precise derivative information over a function involving the all-pairs-shortest paths matrix so it will get a bit slow if you try to do it for many more than a couple hundred nodes.

There are all kinds of ways to use spatial decomposition methods to speed things up, but I'm not really working on that at the moment.

I'm kind of bored with pictures of huge graphs at the moment, they all look like useless hairballs to me. My feeling about working with huge graphs is that you should aggregate or filter them to make a less overwhelming overview and use interaction to allow people to explore interactively from there.

SimonBirrell commented 9 years ago

Hi,

Is it possible to use the avoidOverlaps(true) function where the nodes are not rectangles? In particular, I have nodes that are structured within an SVG g element like this:

screen shot 2015-06-11 at 20 29 38

The nodes (visualised as circles) currently overlap although their centres seem to push the other centres away.

Thanks!

Simon

tgdwyer commented 9 years ago

Have a look at this example.

The nodes circles and overlaps are prevented between the nodes' bounding boxes.

The bounds for the nodes are specified like so:

    graph.nodes.forEach(function (v) { v.height = v.width = 2 * nodeRadius; });

(actual context)

Note also that the start() method is called here like so:

        .start(10,20,20);

this specifies that before the graph is even drawn for the first time, (up to) 10 iterations of layout are applied with no constraints, then 20 iterations with the structural (flow layout) constraints, then another 20 with overlap avoiding constraints.

It gives the graph a chance to untangle before the constraints are enforced.

SimonBirrell commented 9 years ago

I figured it out myself! This is a GREAT library. A little bit more documentation would make it perfect :-)

SimonBirrell commented 9 years ago

Tim,

Thanks so much for your reply! I hadn’t seen it when I went back to write on GitHub.

This is a great library!

Simon

On 12 Jun 2015, at 09:05, Tim Dwyer notifications@github.com wrote:

Have a look at this example http://marvl.infotech.monash.edu/webcola/examples/downwardedges.html.

The nodes circles and overlaps are prevented between the nodes' bounding boxes.

The bounds for the nodes are specified like so:

graph.nodes.forEach(function (v) { v.height = v.width = 2 * nodeRadius; });

(actual context https://github.com/tgdwyer/WebCola/blob/master/WebCola/examples/downwardedges.html#L46)

Note also that the start() method is called here https://github.com/tgdwyer/WebCola/blob/master/WebCola/examples/downwardedges.html#L53 like so:

    .start(10,20,20);

this specifies that before the graph is even drawn for the first time, (up to) 10 iterations of layout are applied with no constraints, then 20 iterations with the structural (flow layout) constraints, then another 20 with overlap avoiding constraints.

It gives the graph a chance to untangle before the constraints are enforced.

— Reply to this email directly or view it on GitHub https://github.com/tgdwyer/WebCola/issues/110#issuecomment-111403156.


Simon Birrell Euro-Demand LLC simon@eurodemand.com mailto:simon@eurodemand.com Tel. +44 7591 829734 Skype: simonbirrell666