search

dagrejs / dagre

Directed graph layout for JavaScript
MIT License
4.61k stars 600 forks source link

Weird node placement using Cytoscape.js #250

Open RK-Veltec opened 6 years ago

RK-Veltec commented 6 years ago

Hello there. I using Cytoscape 3.2.5 with the dagre layout. This issue was already reported in cytoscape-dagre.js, but it is related to the node positioning inside dagre.js

I would like to know why this weird positioning below happens: image

The nodes I talk are RRV-O and RRV-V. Is there a way to fix this?

ipavlic commented 5 years ago

Without seeing more of the graph, it seems that they were balanced against all other nodes. Perhaps increasing edge weights with the tree depth would force the layout you are expecting?

RK-Veltec commented 5 years ago

Without seeing more of the graph, it seems that they were balanced against all other nodes. Perhaps increasing edge weights with the tree depth would force the layout you are expecting?

That's the complete graph: image

If that is somehow balanced, I would like to know why.

ipavlic commented 5 years ago

One might argue that the top most node "should be" in the center, and that you should get a perfect tree layout which seems to be what you are looking for. Dagre is not a tree layouter, it's a general purpose DAG layouter.

If you split the graph in half, the left hand side has something like 40 nodes, and the right hand side around 30. Choosing the x coordinates for nodes to be as right might be a balancing heuristic in the positioning phase which tilts the graph to the right and thus achieves a slightly better ratio of left and right positioned nodes.

gordonwoodhull commented 5 years ago

It's definitely possible to minimize edge lengths in X without resorting to a tree layout algorithm. I'm not sure if this is related to the issue described in #239, but the same solution, using network simplex like dot does, would minimize horizontal edge length.

That said, if your data is a tree (looks like it from this example), then a tree layout algorithm like d3.tree or d3-flextree will be faster and might be better.