Layout algorithms for diagrams

[Andrew Eisenberg]

First, a big thank you to the authors of JointJS.  You have done a superb job of creating a power and simple tool for diagramming. I just discovered this library today.

My question is, does anyone know of any layout algorithms for nodes in JointJS?  My data is a DAG, but with a well-defined root.  Does anyone have suggestions for where to find a layout algorithm, or should I be rolling my own?

regards,
Andrew

[David Durman]

Hi Andrew, thanks, we really appreciate that!

Automatic layouts is something we'll be definitely looking at in the near future. For the time being, it might be interesting to try https://github.com/cpettitt/dagre in combination with JointJS. If somebody else has other ideas/libraries/algorithms, we'd love to hear about them.

Cheers,

David

--
 
---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Andrew Eisenberg]

This is exactly what I was looking for. Trying it now. Thanks.

> You received this message because you are subscribed to a topic in the
> Google Groups "JointJS" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/jointjs/NygjTWe2MZI/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to

[Andrew Eisenberg]

The documentation is lacking a bit, but I am able to properly lay out
my graph. It is working quite nicely now.

On Tue, Jul 23, 2013 at 2:23 PM, Andrew Eisenberg

[Andrew Eisenberg]

Sharing this with the whole list since it may be of wider interest. Here's how I used dagre to layout a joint-js graph.  I start with an array of nodes and edges

The nodes are an array of objects with this structure:

{ joint: <joint_node> }

and edges elements look like this:

{ source: <node>, target: <node>, joint: <joint_link> }

This sets things up for dagre to work on the two arrays:

    dagre.layout()
      .nodes(nodes)
      .edges(edges)
      .run();

This will add dagree properties to the nodes, which contains x and y positions.  These properties must be pushed to the jointjs nodes and scaled appropriately:

   
    // scale the values
    _.values(nodes).forEach(function(node) {
        var rawX = FLIP_AXES ? node.dagre.y : node.dagre.x;
        var rawY = FLIP_AXES ? node.dagre.x : node.dagre.y;
        var newX = rawX * X_SCALE + X_TRANSLATE;
        var newY = rawY * Y_SCALE + Y_TRANSLATE;
       
        node.joint.attributes.position = {x: newX, y: newY};
    });

I just played around with the x and y scales until I was happy with them.  Also, flipping axes can rotate the graph.

Hope this helps.

On Wed, Aug 21, 2013 at 12:16 PM, Andrew Eisenberg <andrew.e...@gmail.com> wrote:

Sure. It's not in a public repo, but I can scrounge together something to share here.

On Wed, Aug 21, 2013 at 12:08 PM, Yaxiong Lin <lin.y...@gmail.com> wrote:

Hi Andrew,

I am interested in using Dagre to auto layout a diagram.  Do you mind sharing some example code that you have working that uses dagre with JoinJS?

Thanks.

Yaxiong Lin

[Praveen m.p]

Hi Dave,

I am working with jointJs + Dagre. I am able to get the auto layouting for a lineage of nested nodes to work perfectly. But here comes a scenario where for a particular set of nodes nested under another node i want to place (layout) them vertically when i have given the rankDir as LR for the graph overall. Is there a way for that? Any help would be appreciated. Thanks.