Tree Layout

Feb 26, 2014 at 4:49 PM
Edited Feb 26, 2014 at 4:53 PM

I'm trying to use NODEXL for tree structure (I know that there are other tool specially for such layout but i prefer to use the NODEXL due to other factors)

I have used the SugiyamaLayout but this is what i'm getting when the graph is draw.


How can I distribute the vertices evenly inside the windows frame ?

something like that:

This is my code:
 protected void PopulateAndDrawGraph()
            oVertices = nodeXLControl1.Graph.Vertices;
            oEdges = nodeXLControl1.Graph.Edges;
            IVertex parent = oVertices.Add();
            float primScreenHeight = (float)System.Windows.SystemParameters.FullPrimaryScreenHeight;
            float primScreenWidth = (float)System.Windows.SystemParameters.FullPrimaryScreenWidth;

            parent.Location = new System.Drawing.PointF(primScreenHeight/2, 20);
            // Draw vertex Root as a Label, which is a rectangle containing text.
            parent.SetValue(ReservedMetadataKeys.PerVertexShape, VertexShape.Label);
            parent.SetValue(ReservedMetadataKeys.PerVertexLabel, tree.Graph.ToString());

            // Set the label's text and fill colors.
            parent.SetValue(ReservedMetadataKeys.PerColor, Color.FromArgb(255, 220, 220, 220));
            parent.SetValue(ReservedMetadataKeys.PerVertexLabelFillColor, Color.FromArgb(255, 0, 0, 0));

            nodeXLControl1.Layout = new Smrf.NodeXL.Layouts.SugiyamaLayout();
    public void buildTree(Node node,IVertex parent)
            if (node.Children == null || node.Children.Count == 0)
            // Add Root Vertex

            foreach (var child in node.Children)
                IVertex childNode = oVertices.Add();

                // Draw vertex Root as a Label, which is a rectangle containing text.
                childNode.SetValue(ReservedMetadataKeys.PerVertexShape, VertexShape.Label);
                childNode.SetValue(ReservedMetadataKeys.PerVertexLabel, child.Graph.ToString());

                // Set the label's text and fill colors.
                childNode.SetValue(ReservedMetadataKeys.PerColor, Color.FromArgb(255, 220, 220, 220));
                childNode.SetValue(ReservedMetadataKeys.PerVertexLabelFillColor, Color.FromArgb(255, 0, 0, 0));

                //Add Edge to father 
                IEdge oEdge1 = oEdges.Add(parent, childNode, true);

                oEdge1.SetValue(ReservedMetadataKeys.PerColor, Color.FromArgb(255, 55, 125, 98));
                oEdge1.SetValue(ReservedMetadataKeys.PerEdgeWidth, 3F);
                oEdge1.SetValue(ReservedMetadataKeys.PerEdgeLabel, child.CurrentMove.Player + " - " + child.CurrentMove.Position);

                buildTree(child, childNode);
Feb 27, 2014 at 5:11 PM
Edited Feb 27, 2014 at 5:12 PM
The SugiyamaLayout is broken in NodeXL. It worked well at one time, but when we switched the display layer from GDI-plus to WPF, the scaling in SugiyamaLayout broke and it hasn't been fixed yet. I've wanted to pull it out of the system, given that it usually doesn't work, but apparently it does work for some simple graphs and so I got some pushback on that idea. We have a work item to fix it, but I don't know when we're going to get to it.

-- Tony
Feb 27, 2014 at 11:52 PM

Do you have a suggestion for another WPF control that can visualize a tree structure with thousands (or even more) of nodes - something good with functionality as the NODEXL have ? I googled that already, the best I have found is the 3d.js library but its for web applications

Feb 28, 2014 at 12:12 AM
Sorry, I don't.

-- Tony