Constructing custom layouts

GoJS
1

Hi

Is there a way I can switch alignments (within the TreeLayout) or entire layouts depending on the layer, or other properties of the node in question?

Do you have any documentation and/or samples that might help with creating custom layouts?

2

Try overriding TreeLayout.assignTreeVertexValues.

3

Hi Walter

I’m sorry, but I did not understand that. I read the API documentation for assignTreeVertexValues; how do I use that?

I suspect I could be more specific with my question. Let’s say I want to construct a tree such that the first layer of child nodes is drawn using AlignmentCenterChildren. Subsequent layers after that are rendered using AlignmentBus.

Is this possible? Is there a code sample that illustrates this? If it isn’t feasible using the TreeLayout, is there an alternative I could attempt?

Again, any code samples and/or documentation would be much appreciated.

Thanks.

4

I’m sorry about that – although the description of that method is concise and thorough, there isn’t any general documentation about TreeLayout or any of the other layouts. We need to bring the general layout documentation to GoJS. The TreeLayout sample (Tree Layout) provides the best way to explore the possibilities.

If you override that method you can set whatever properties you want on that TreeLayoutVertex.

However for the simple case that you describe, no subclass or override is needed. You can just set these properties on the TreeLayout:
{ treeStyle: go.TreeLayout.StyleRootOnly, angle: 90, alignment: go.TreeLayout.AlignmentCenterChildren, alternateAngle: 90, alternateAlignment: go.TreeLayout.AlignmentBus }

5

Hi Walter

That’s pretty close to what I was seeking. I am going to try going through the samples and the API documentation to see if I can figure out how the layout system works, but in the meanwhile - is there a way to get layouts that produce the trees depicted in these images?


Thanks for your time.

6


For the first layout, I think you just need to set the TreeLayout.breadthLimit to a value such that four subtrees would fit in each row.

For the second layout, there appear to be two issues. One is that “Steve Seuberling” seems to be using a Bus alignment, whereas the siblings seem to be BottomRightBus alignment. This is a case where you probably want to override TreeLayout.assignTreeVertexValues so that you can set the alignment of the vertex corresponding to the “Steve Seuberling” node. Use TreeVertex.node to get to the Node.

The other issue with the second layout is that “Tina Nomura” and “Larry Dathow” are positioned further down than would be normal. Furthermore, the children for “Lynn Brewer” and “Steve Seuberling” are further down than normal, also.

You could certainly set the TreeVertex.layerSpacing in the override of assignTreeVertexValues to control the distance between the parent and its children.

I’m not sure about controlling the distance above the child. You could customize the TreeVertex.bounds so that the vertex for “Tina Nomura” and “Larry Dathow” are taller than their respective Nodes actually are, causing extra space to be taken up by them. But that would require some experimentation. It might be easiest to just specify a larger layerSpacing for all of them, and then explicitly move the Node down (increased Y) for those two people, in an override of TreeLayout.commitNodes that first calls the base method.