Align separate trees next to each other, each starts from first row

GoJS
1

I used LayeredDigraphLayout to build something like that http://i.imgur.com/wWMSf3s.png
And i want it to look like that http://i.imgur.com/uHxFGmI.png

As you can see on first screenshoot there are three separate connections grouped on bottom-right, is it possible to align them next to each other and each one starts from top first row? (second screen)

2

Try setting this LayeredDigraphLayout option:

      layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource

As an unrelated issue, I assume you know how to change your node template to look like the nodes in the second screenshot.

3

Its aligned top but still not ideal, http://i.imgur.com/suT0hwB.png
I want each tree to be in own invisible rectangle, and each rectangle next to each other (no overlaping).

4

I think you will need to split up the diagram into separate subgraphs and apply the layout to each one, specifying the Layout.arrangementOrigin at increasing positions toward the right. I should have time to demonstrate this for you later today.

5

Here you go:

  function ArrangedLayeredDigraphLayout() {
    go.LayeredDigraphLayout.call(this);
    this.arrangementSpacing = 50;  // some space between the sub graphs
  }
  go.Diagram.inherit(ArrangedLayeredDigraphLayout, go.LayeredDigraphLayout);

  ArrangedLayeredDigraphLayout.prototype.doLayout = function(coll) {
    var net = this.makeNetwork(coll);
    var subnets = net.splitIntoSubNetworks();
    var initorig = this.arrangementOrigin.copy();
    var orig = this.initialOrigin(initorig).copy();
    var diagram = this.diagram;
    diagram.startTransaction();
    // layout each subnetwork
    // you could sort these in a different order, if you like
    var lay = this;
    subnets.each(function(n) {
      lay.network = n;
      lay.arrangementOrigin = orig;
      go.LayeredDigraphLayout.prototype.doLayout.call(lay, coll);
      var bnds = diagram.computePartsBounds(n.findAllParts());
      if (lay.direction === 0 || lay.direction === 180) {
        orig.y += bnds.height + lay.arrangementSpacing;
      } else {
        orig.x += bnds.width + lay.arrangementSpacing;
      }
    })
    // now layout any singleton nodes left over from splitIntoSubNetworks()
    // you could also sort these in a different order
    net.vertexes.each(function(v) {
      var node = v.node;
      if (node !== null) {
        node.move(orig);
        var bnds = node.actualBounds;
        if (lay.direction === 0 || lay.direction === 180) {
          orig.y += bnds.height + lay.arrangementSpacing;
        } else {
          orig.x += bnds.width + lay.arrangementSpacing;
        }
      }
    });
    this.arrangementOrigin = initorig;
    diagram.commitTransaction("ArrangedLayeredDigraphLayout");
  };