How can I change the default layout algorithm?

Oct 10, 2008 at 11:14 AM

I used netMapControl in Windows Form,  I really love the style and functionality of Netmap. But I don't know how can I change the default layout algorithm from FruchtermanReingold to Circular, Spiral, SinusoidHorizontal, Grid, Sugiyama programmed.  Thanks!


using System;
using System.Windows.Forms;
using System.Drawing;
using Microsoft.NetMap.Visualization;
using Microsoft.NetMap.Core;

namespace WindowsFormsApplication1
public partial class Form1 : Form
    public Form1()


        // The default vertex drawer draws all vertices with the same
        // color, radius, and shape.  Replace it with one that will vary
        // the appearance of each vertex based on metadata values stored in
        // the vertices.  (Note that there are also PerVertexWithLabel and
        // PerVertexWithImage drawers that do the same thing and more.)

        netMapControl1.VertexDrawer = new PerVertexDrawer();

        // Replace the default edge drawer with one that will vary the
        // color and width of each edge based on metadata values
        // stored in the edges.  (Note that there are also
        // PerEdgeWithLabel and PerEdgeWithImage drawers that do the
        // same thing and more.)

        netMapControl1.EdgeDrawer = new PerEdgeDrawer();

        // Get the graph's vertex collection.

        IVertexCollection oVertices = netMapControl1.Graph.Vertices;

        // Add three vertices.

        IVertex oVertexA = oVertices.Add();
        IVertex oVertexB = oVertices.Add();
        IVertex oVertexC = oVertices.Add();

        // Customize their appearance.

        oVertexA.SetValue(ReservedMetadataKeys.PerColor, Color.Blue);
        oVertexA.SetValue(ReservedMetadataKeys.PerVertexRadius, 15F);

        oVertexB.SetValue(ReservedMetadataKeys.PerColor, Color.Orange);
        oVertexB.SetValue(ReservedMetadataKeys.PerVertexRadius, 20F);

        // Get the graph's edge collection.

        IEdgeCollection oEdges = netMapControl1.Graph.Edges;

        // Connect the vertices with directed edges.

        IEdge oEdge1 = oEdges.Add(oVertexA, oVertexB, true);
        IEdge oEdge2 = oEdges.Add(oVertexB, oVertexC, true);
        IEdge oEdge3 = oEdges.Add(oVertexC, oVertexA, true);

        // Customize their appearance.

        oEdge1.SetValue(ReservedMetadataKeys.PerColor, Color.Chartreuse);
        oEdge1.SetValue(ReservedMetadataKeys.PerEdgeWidth, 3);

        oEdge2.SetValue(ReservedMetadataKeys.PerEdgeWidth, 5);

        oEdge3.SetValue(ReservedMetadataKeys.PerColor, Color.ForestGreen);


Oct 10, 2008 at 5:02 PM

Just set the NetMapControl.Layout property to a new layout object somewhere between the BeginUpdate() and EndUpdate() calls.  Here is how you would use a grid layout, for example:

            // Replace the default layout with a grid.

            netMapControl1.Layout = new GridLayout();

For other layouts, you would set the Layout property to a new CircleLayout, RandomLayout, SinusoidHorizontalLayout, SinusoidVerticalLayout, SpiralLayout, or SugiyamaLayout object.  (When using SugiyamaLayout, you should also use SugiyamaVertexDrawer and SugiyamaEdgeDrawer objects.)

And if that's not enough, you can create your own layout by implementing a class that derives from ILayout and setting the Layout property to an instance of that class.

-- Tony

Oct 13, 2008 at 4:49 AM
Hi Tony,
    Thanks for your response.  I can change the layout algorithm as you suggested now. But the layout of my data is still not very nice. Could you let me know the test data and layout algorithm that were used to render the picture at project startpage( Especially for Graph[1,3,5,6].gif?

Oct 13, 2008 at 4:48 PM

I'm afraid I didn't keep the data for those sample images, just the images themselves.  They were laid out with the FruchtermanReingold, Circle, and Sugiyama layouts.

If you're using the FruchtermanReingoldLayout and you're not happy with the results, try calling NetMapControl.ForceLayout() one or more times after the initial drawing completes.  (You can monitor the GraphDrawn event for this.)  The Fruchterman-Reingold algorithm is iterative -- it lays out the vertices repeatedly, using the previous vertex locations as a starting point.  The initial drawing uses 10 iterations, which may or may not be enough to place the vertices in sensible locations.  Each call to ForceLayout() forces another 10 iterations, which can sometimes improve things considerably.  It all depends on the data set.

-- Tony
Oct 14, 2008 at 4:16 PM
Hi Tony,
   Thanks for your suggestions. I used FruchtermanReingoldLayout and tried to call ForceLayout() several times after initial drawing completes, but the results is still not very well as expexted. It should lie in the data set and I will come to Netmap again later. Please keep on developing this wonderful project.