TreeLayout different spacings


#1

Is it posiible to set up different indents for children inside one parent and indents for parents?


#2

Yes, you just need to set https://gojs.net/latest/api/symbols/TreeVertex.html#nodeSpacing to larger values as the value of https://gojs.net/latest/api/symbols/TreeVertex.html#maxGenerationCount increases.

You can do that in an override of https://gojs.net/latest/api/symbols/TreeLayout.html#assignTreeVertexValues

If I have time later today and you haven’t already figured it out, I can create a sample for you.


#3

will wait for you sample,
Thank you


#4
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          {
            initialContentAlignment: go.Spot.Center,  // for v1.*
            layout: $(go.TreeLayout,
                      {
                        assignTreeVertexValues: function(v) {
                          v.nodeSpacing = 10 * v.maxGenerationCount;
                        }
                      })
          });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, { fill: "white" },
          new go.Binding("fill", "color")),
        $(go.TextBlock, { margin: 8 },
          new go.Binding("text"))
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue" },
      { key: 2, text: "Beta", color: "orange" },
      { key: 3, text: "Gamma", color: "lightgreen" },
      { key: 4, text: "Delta", color: "pink" },
      { key: 5, text: "Epsilon", color: "yellow" },
      { key: 6, text: "Zeta", color: "thistle" },
      { key: 7, text: "Eta", color: "tomato" },
      { key: 8, text: "Theta", color: "tomato" },
      { key: 9, text: "Iota", color: "lightgreen" },
      { key: 10, text: "Kappa", color: "pink" },
      { key: 11, text: "Lambda", color: "yellow" }
    ],
    [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 3, to: 4 },
      { from: 3, to: 5 },
      { from: 4, to: 6 },
      { from: 4, to: 7 },
      { from: 2, to: 8 },
      { from: 2, to: 9 },
      { from: 9, to: 10 },
      { from: 9, to: 11 }
    ]);
  }

Note how the override of TreeLayout.assignTreeVertexValues does what I suggested above.


#5

Is it posiible to set up different indents for children inside one parent?
image


#6

You could pretend that each node is bigger by varying amounts than it actually is by increasing the TreeVertex.height (and TreeVertex.focusY?) in that same method override.


#7

part of solution works.
How to set node in center of vertex?
here is example http://plnkr.co/edit/DAVmuxTrbL4XzWIjzUjI?p=preview


Gamma Delta and Iota shold be in the center of the vertex

v.focusY = v.height / 2; doesn’t work. With it it looks like this


#8

In my copy of the code that I posted above, I added some lines to that override:

                        assignTreeVertexValues: function(v) {
                          v.nodeSpacing = 10 * v.maxGenerationCount;
                          var dh = 50-v.height;
                          v.y = dh/2;
                          v.height = 50;
                          v.focusY = 25;
                        }

and changed the tree structure. I got:
image


#9

It looks like

var dh = 50-v.height;
v.y = dh/2;

doesn’t work at all



http://plnkr.co/edit/4IBkJXcEbp0eE1VrxGbq?p=preview


#10
  assignTreeVertexValues: function(v) {
    v.nodeSpacing = 10 * v.maxGenerationCount;
    if (v.childrenCount > 0) {
      v.height = 100;
    }
  }

I’m sorry, but I still do not understand what you want.


#11

My final task is to set different idents for nodes with children and without.


for example:

Indents between Delta and Epsilon, between Delta and Theta, between Gamma and Eta should be 32px.

Indents between Eta and Beta, between Theta and Iota should be 16px.


#12

I assume you mean “spacing”, not “indent”. It appears that you want each parent node to be broader (i.e. taller) than it actually is, without making its children broader. OK, how about:

      $(go.Diagram, "myDiagramDiv",
          {
            initialContentAlignment: go.Spot.Center,  // for v1.*
            layout: $(go.TreeLayout,
                      {
                        nodeSpacing: 0,
                        assignTreeVertexValues: function(v) {
                          if (v.childrenCount > 0) {
                            v.height += 32;
                            v.focusY += 32/2;
                          }
                        },
                        commitNodes: function() {
                          go.TreeLayout.prototype.commitNodes.call(this);
                          this.network.vertexes.each(function(v) {
                            var n = v.node;
                            if (n && v.childrenCount > 0) {
                              n.location = new go.Point(n.location.x, n.location.y + 32/2);
                            }
                          });
                        }
                      })
          });

image

I intentionally set TreeLayout.nodeSpacing to zero so that it’s obvious.


#13

That is what I was looking for. Thank you!