Article Rating

  • 0 Rating(s)
  • 0
  • 0
  • 0
  • 0
  • 0
Applies to: Nevron Diagram for .NET

How to use the Diagram Layered Graph Layout?

The layered graph layout is used to layout a graph in layers. The layout strives to minimize the number of crossings between edges and produces a polyline graph drawing. This type of layout is very useful for the arrangement of flow diagrams, since it works well on all types of graphs (including those with self-loops and duplicate edges).

The most important properties of the Layered Graph Layout are:
  • Direction - determines the flow direction of the layout. By default set to TopToBottom.
  • EdgeRouting - determines what edge routing is applied. Possible values are:
    • Polyline - the edges are drawn using a polyline with few bends
    • Orthogonal - the edges are drawn using only horizontal and vertical line segments
  • NodeRank - specifies the node ranking policy used by the layout. It can be:
    • TopMost - all nodes without incomming edges are assigned to the topmost layer
    • Gravity - layer distribution is done in such a way that the total length of all edges is minimized
    • Optimal - similar to the topmost, but after the initial assignment all nodes fall downwards as much as possible
  • PlugSpacing - determines the spacing between the plugs of a node. You can set a fixed amount of spacing or a proportional spacing, which means that the plugs are distributed along the whole side of the node.
  • LayerAlignment - determines the vertical alignment of the nodes in the layers.
  • NodeAlignment - determines the horizontal alignment of the nodes in the layers.
  • SelfLoopSpacingFactor - determines the self-loop spacing factor. It spaces the self-loops as a ratio of the body height.
  • VertexSpacing and LayerSpacing - determine the spacing between nodes and layers respectively.
  • StraightenLines - if turned on an additional step is performed that tries to straighten the lines as much as possible in the case of orthogonal edge routing.
  • UseSingleBus - if true and the EdgeRouting is orthogonal, all edges will be placed on a single bus between each pair of layers.
  • Compact - determines whether the layout should try to minimize the width of the drawing or not.


The following code example will help you create a random graph and apply Layered Graph Layout to it, exploring most of the layout properties:

[C#]
using System;
using System.Windows.Forms;
using Nevron.Diagram;
using Nevron.Diagram.Filters;
using Nevron.Diagram.Layout;
using Nevron.Diagram.Templates;
using Nevron.Dom;
...
private void Form1_Load(object sender, EventArgs e)
{
    view.BeginInit();
 
    view.Dock = DockStyle.Fill;
    view.ViewLayout = ViewLayout.Fit;
    view.Grid.Visible = false;
    view.GlobalVisibility.ShowPorts = false;
 
    document.BeginInit();
 
    // create a random graph
    NRandomGraphTemplate randomGraph = new NRandomGraphTemplate();
    randomGraph.VertexCount = 30;
    randomGraph.EdgeCount = 35;
     
    randomGraph.Create(document);
 
    // get the shapes to layout
    NNodeList shapes = document.ActiveLayer.Children(NFilters.Shape2D);
 
    // use layered graph layout
    NLayeredGraphLayout layout = new NLayeredGraphLayout();
    layout.Direction = LayoutDirection.TopToBottom;
    layout.EdgeRouting = LayeredLayoutEdgeRouting.Orthogonal;
    layout.NodeRank = LayeredLayoutNodeRank.Optimal;
    layout.PlugSpacing.Mode = PlugSpacingMode.Proportional;
    layout.PlugSpacing.Offset = 0;
    layout.LayerAlignment = RelativeAlignment.Near;
    layout.NodeAlignment = RelativeAlignment.Center;
    layout.SelfLoopSpacingFactor = 0.25f;
    layout.VertexSpacing = 40;
    layout.LayerSpacing = 40;
    layout.StraightenLines = false;
    layout.UseSingleBus = false;
    layout.Compact = false;           
     
    layout.Layout(shapes, new NDrawingLayoutContext(document));
     
    // size to visible shapes
    document.SizeToContent(document.AutoBoundsMinSize, document.AutoBoundsPadding, NFilters.Visible);
 
    document.EndInit();
    view.EndInit();
}

[VB.NET]
Imports System
Imports System.Windows.Forms
Imports Nevron.Diagram
Imports Nevron.Diagram.Filters
Imports Nevron.Diagram.Layout
Imports Nevron.Diagram.Templates
Imports Nevron.Dom
...
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    view.BeginInit()
 
    view.Dock = DockStyle.Fill
    view.ViewLayout = ViewLayout.Fit
    view.Grid.Visible = False
    view.GlobalVisibility.ShowPorts = False
 
    document.BeginInit()
 
    ' create a random graph
    Dim randomGraph As New NRandomGraphTemplate()
    randomGraph.VertexCount = 30
    randomGraph.EdgeCount = 35
 
    randomGraph.Create(document)
 
    ' get the shapes to layout
    Dim shapes As NNodeList = document.ActiveLayer.Children(NFilters.Shape2D)
 
    ' use layered graph layout
    Dim layout As New NLayeredGraphLayout()
    layout.Direction = LayoutDirection.TopToBottom
    layout.EdgeRouting = LayeredLayoutEdgeRouting.Orthogonal
    layout.NodeRank = LayeredLayoutNodeRank.Optimal
    layout.PlugSpacing.Mode = PlugSpacingMode.Proportional
    layout.PlugSpacing.Offset = 0
    layout.LayerAlignment = RelativeAlignment.Near
    layout.NodeAlignment = RelativeAlignment.Center
    layout.SelfLoopSpacingFactor = 0.25F
    layout.VertexSpacing = 40
    layout.LayerSpacing = 40
    layout.StraightenLines = False
    layout.UseSingleBus = False
    layout.Compact = False
 
    layout.Layout(shapes, New NDrawingLayoutContext(document))
 
    ' size to visible shapes
    document.SizeToContent(document.AutoBoundsMinSize, document.AutoBoundsPadding, NFilters.Visible)
 
    document.EndInit()
    view.EndInit()
End Sub

Article ID: 157, Created On: 12/14/2010, Modified: 12/15/2010