Layout for a family tree

[azarai]

Hi,

i was evaluating dagre with dagre-d3 for creating a typical family tree (like http://www.yangfamilytaichi.com/yang/tree/images/familytree.jpg).

My test:
http://jsfiddle.net/aJg2G/1/

Basically each generation should be on the same row/line. How can i influence the layouting to archieve that?

Thanks,

Jens

[cpettitt]

If you're just trying to get certain nodes to be on the same row, you can use the "rank" attribute. I updated your example: http://jsfiddle.net/aJg2G/2/.

[azarai]

Thanks. While testing it out ( http://jsfiddle.net/aJg2G/4/ ) and adding relationships between parents, some more questions came up. And pointing into the right direction would be great.

• everytime i run it the nodes are in different oder. How can i make that more static?
• Can i change the position at which an edge is attached to the node? From your examplepage it seems thats already defnied here and not in the renderer.

[cpettitt]

everytime i run it the nodes are in different oder. How can i make that more static?

You can remove g.graph({ orderRestarts: 5}); from your example to make it static. The orderRestarts option trades off deterministic layout for potentially fewer crossings.

Can i change the position at which an edge is attached to the node?

Dagre itself doesn't determine where the edge with intersect the node. Dagre-d3 uses the intersectRect function to determine this. If you use dagre-d3 you can override positionEdgePaths to change how the edge is laid out.

[utensil]

Thanks @azarai for the good question(which I have a similar one) and @cpettitt for the great answer(which solved my problem, though I dig the source to figure out rank has to be min, max or prefixed by same_).

Is there any document or a center comment place to describe all options supported by nodes and edges? From https://github.com/cpettitt/dagre#input-graph , there's only 'minLen' which I previous ended up using to control the ranking, no rank.

[varghesep]

None of the examples mentioned in this ticket work anymore in jsFiddle.

[pthorson]

Looks like the API changed a bit. Based on the demos in dagre-3d, I updated the above rank attribute fiddle with the new API: http://jsfiddle.net/fgrkdg2b/1/.

[magicDev224]

Actually rank is not working.
If you are possible please let me know the method for ranking nodes

[EmilStenstrom]

I managed to get the above link working again (lots of things had changed). Here's a graph with ranking working as it should: https://jsfiddle.net/dmceshar/

EDIT: I take that back, rank isn't doing anything at all, nothing changes when it's removed.