Issues understanding automatic layouting

GoJS
1

Hi,

I’m evaluating GoJs for one of my latest projects. I think I developed some understanding of the basic stuff, however I have troubles understanding the layouting features.

A long time ago I used to work with GoDiagram .Net and as far as I remember one could select a layout option and GoDiagram magically created a nice looking layout. In GoJS I can’t figure out how the layouting is suppose to work. I attached a simple example I’m using. The layout is very suboptimal. For instance, I would like to have a top down alignment of the nodes.

Can anyone help me out with a simple example?




var diagram = new go.Diagram(“test”);
var $ = go.GraphObject.make;


var whitegreygradcolor = $(go.Brush, go.Brush.Linear, { 0.0: “white”, 1.0: “lightgrey” });


diagram.nodeTemplate =
<span =“Apple-tab-span” style=“white-space:pre”> $(go.Node, go.Panel.Auto,
<span =“Apple-tab-span” style=“white-space:pre”> <span =“Apple-tab-span” style=“white-space:pre”> { isShadowed: true, shadowOffset: new go.Point(3, 3) },
<span =“Apple-tab-span” style=“white-space:pre”> $(go.Shape,
<span =“Apple-tab-span” style=“white-space:pre”> { figure: “RoundedRectangle”,
<span =“Apple-tab-span” style=“white-space:pre”> fill: “white” },
<span =“Apple-tab-span” style=“white-space:pre”> new go.Binding(“fill”, “color”)),
<span =“Apple-tab-span” style=“white-space:pre”> $(go.TextBlock,
<span =“Apple-tab-span” style=“white-space:pre”> { margin: 5 },
<span =“Apple-tab-span” style=“white-space:pre”> new go.Binding(“text”, “key”)));





var nodeDataArray = [
<span =“Apple-tab-span” style=“white-space:pre”> { key: “A”, color: whitegreygradcolor},
<span =“Apple-tab-span” style=“white-space:pre”> { key: “B”, color: whitegreygradcolor },
<span =“Apple-tab-span” style=“white-space:pre”> { key: “C”, color: whitegreygradcolor },
<span =“Apple-tab-span” style=“white-space:pre”> { key: “D”, color: whitegreygradcolor },
<span =“Apple-tab-span” style=“white-space:pre”> { key: “E”, color: whitegreygradcolor }
<span =“Apple-tab-span” style=“white-space:pre”> ];
<span =“Apple-tab-span” style=“white-space:pre”> var linkDataArray = [
<span =“Apple-tab-span” style=“white-space:pre”> { from: “A”, to: “B” },
<span =“Apple-tab-span” style=“white-space:pre”> { from: “B”, to: “C” },
<span =“Apple-tab-span” style=“white-space:pre”> { from: “C”, to: “C” },
<span =“Apple-tab-span” style=“white-space:pre”> { from: “C”, to: “B” },
<span =“Apple-tab-span” style=“white-space:pre”> { from: “C”, to: “D” },<span =“Apple-tab-span” style=“white-space:pre”>
<span =“Apple-tab-span” style=“white-space:pre”> { from: “C”, to: “E” }
<span =“Apple-tab-span” style=“white-space:pre”> ];
<span =“Apple-tab-span” style=“white-space:pre”>
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

2

If you want an automatic diagram layout, just set Diagram.layout. For example:
// create a TreeLayout for the family tree<br /> myDiagram.layout = $(go.TreeLayout, { angle: 90, nodeSpacing: 5 });
Read more at Page Not Found -- Northwoods Software

Note that associating a layout with a diagram is not present in GoDiagram. The advantage of this arrangement is that it really is an automatic layout. By default as nodes or links are added or removed or change visibility, another layout is performed, without any code on your part.

3

Hi,

Got it - thanks for the quick reply!

I added following line and did some reading on the layouts:

diagram.layout = $(go.LayeredDigraphLayout, { direction: 90, isOngoing: true, layerSpacing: 50 });

My issue now is that the above example has many collisions (see attached picture).

I assume there are some options that could be tweaked. Could you point out?

4

I suggest you modify the Link template until you get the style that you want.
http://gojs.net/latest/intro/links.html and http://gojs.net/latest/intro/connectionPoints.html.

You might want to start off with the absolute minimal Link template, so you can see the default behavior.

5

The problem is that the default template delivers also pretty bad results.

As you can see the main issue is that edges overlap nodes or that edges, such as the one from B to C makes a random curve.

Should the layouting take care about this to produce optimal results? Do I really have to play around with connection points?

6

Try setting LayeredDigraphLayout.setsPortSpots = false.