Alignment of nodes having no links in LayeredDigraphLayout

GoJS
1

Hello.

When using LayeredDigraphLayout, I want to know how to configure the alignment of nodes having no links.
I set the layout option like below.

	var diagram = $goJs(go.Diagram, diagramDivId,
	    	{
        		contentAlignment: go.Spot.Center,
	        	initialContentAlignment: go.Spot.Center,
	        	allowLink: true,
	        	allowMove: true,
	        	layout: $goJs(go.LayeredDigraphLayout,
		        		{
	        				direction : 90
		        		}
		        	)
	    	}
    	);

When I added some nodes on diagram, the nodes are lined up horizontally.
When I drag a line from node to node, the nodes having link are lined up vertically.

If I want to change the direction of node having no links, how can I do this?
Can you advice for me?

The nodes having no links are displayed like this.

capture_031.png1156×58 2.64 KB

The nodes having links are displayed like this.

Thanks.

2

Try using this custom LayeredDigraphLayout:

  function ArrangingLayeredDigraphLayout() {
    go.LayeredDigraphLayout.call(this);
    this.individuals = null;  // Nodes in layout whose LayoutVertexes did not have any connected LayoutEdges
  }
  go.Diagram.inherit(ArrangingLayeredDigraphLayout, go.LayeredDigraphLayout);

  ArrangingLayeredDigraphLayout.prototype.makeNetwork = function(coll) {
    var net = go.LayeredDigraphLayout.prototype.makeNetwork.call(this, coll);
    var singletons = new go.Set();
    net.vertexes.each(function(v) { if (v.edgesCount === 0) singletons.add(v); });
    singletons.each(function(v) { net.deleteVertex(v); });
    this.individuals = new go.Set().addAll(singletons.map(function(v) { return v.node; }));
    if (net.vertexes.count === 0) this.layoutIndividuals(net);
    return net;
  };

  ArrangingLayeredDigraphLayout.prototype.layoutIndividuals = function(net) {
    if (this.individuals !== null) {
      var parts = net.findAllParts();
      var bounds = this.diagram.computePartsBounds(parts);
      if (!bounds.isReal()) bounds = new go.Rect(this.arrangementOrigin, new go.Size(0, 0));
      var x = bounds.x;
      var y = bounds.bottom + 20;  // some vertical space between the main graph and the individual nodes
      var it = this.individuals.iterator;
      while (it.next()) {
        var node = it.value;
        node.moveTo(x, y);
        y += node.actualBounds.height + 20;  // increment Y by the node's height plus some space
      }
      this.individuals = null;
    }
  }

  ArrangingLayeredDigraphLayout.prototype.commitLayout = function() {
    go.LayeredDigraphLayout.prototype.commitLayout.call(this);  // call base method first
    this.layoutIndividuals(this.network);
  };

You could customize layoutIndividuals to position the unconnected nodes however you like. This code just puts them all vertically in the left column, with 20 space between the nodes.

3

Walter.

Thanks for your fast reply.
Your reply solved my problem exactly.
I appreciate it.

Have a good day.