RankingLayout example

[varghesep]

I'm trying to generate a directed graph, but with constraints like some nodes should be on the same layer or rank. For example, I have four nodes A, B, C, D. The relationships is

A => B A => C A => D

When the graph is drawn I want the nodes A, B, C are on the same layer and the D in the second layer. I don't see any property on Node through which I can set the rank. How can I achieve this with RankingLayout?

[levnach]

Hi Varghesep, RankingLayout will not work for you. You need to use the standard layered layout. I created a sample for you called SameLayerSample. Here are the essential code lines Graph graph = new Graph(); var sugiyamaSettings = (SugiyamaLayoutSettings)graph.LayoutAlgorithmSettings; sugiyamaSettings.NodeSeparation *= 2; graph.AddEdge("A", "B"); graph.AddEdge("A", "C"); graph.AddEdge("A", "D"); graph.LayerConstraints.PinNodesToSameLayer(new[] { graph.FindNode("A"), graph.FindNode("B"), graph.FindNode("C") }); gViewer.Graph = graph; There was a bug that initially prevented this code to work, and I submitted a fix just now. So you need to build the new binaries. Thanks, Lev

[varghesep]

Thank you very much. I pulled the latest code from the github repo and I see the layout.

However, I have a little bit issue though. I currently user GeometryGraph and generate the node center locations in a server side ASP.NET MVC application and the send those locations as points to the browser. Then I display the nodes and edges using HTML5 SVG. I want my app to be free from drawing/rendering logic. I have the reference to the Microsoft.Msagl and not Microsoft.Msagl.Drawing. Because I don't have reference to Microsoft.Msagl.Drawing, I can't use the layer constraints.

1. Can I achieve the same layout with Microsoft.Msagl only?
2. I deal with a large genealogy (family tree) graph with couple, siblings, parents relationship. I have the option of using WebCola to process the graph on the client or use MSAGL to process it on the server. Do you think MSAGL fits my need?
3. Do you know any Microsoft research going on to display DGML on Browsers with html5.

[levnach]

Answering your questions. 1) yes. 2) yes 3) no I created two more samples, so, please pull the new version. One is LayerConstraintsFromGeometrySample, which shows the layer constraints without using Drawing.Graph. Another might be more interesting for you. It uses PhyloTree structure and the corresponding layout which were specifically designed to draw genealogy trees and are used in PhyloDett, http://research.microsoft.com/en-us/um/redmond/groups/cue/phylodet/index.html. The second sample is PhyloTreeFromGeometrySample. I realize that you need to draw a graph which is not a tree. To handle the non-tree edges, I first calculate everything on the underlying tree and then, in a separate step, route the missing edges. The drawback here is that the layout does not take in the consideration those edges, but maybe it will not be an issue for your scenario.

[varghesep]

Thank you so much for the quick response. I pulled the latest code and see the new samples working. I will spend the next few days to work on the example I have and give you feedback.

The family tree can be drawn by using tree. You can see some examples at tree with d3. As you may know, the families are not perfect like that :) as in the picture. Marriages between relatives have happened in my culture. Then some re-marriages too.

The other challenge is showing the full picture of a family. Please see the attached picture from MyHeritage website. In the picture, Mary Joe's family tree is collapsed (See the small tree pop). If her tree is expanded, Jacob Doe's family tree will be collapsed. So one of the tree can be shown at a time.

So, I believe the family tree needs to be graph and layered to show very complex relationships (edges) and a full picture of the family.