Unlike swim lane diagrams where the nodes are supposed to stay in their lanes, layer bands run perpendicular to the growth direction of the layout.
This sample uses a custom TreeLayout that overrides the TreeLayout.commitLayers method in order to specify the position and size of each "band" that surrounds a layer of the tree. The "bands" are held in a single Part that is bound to a particular node data object whose key is "_BANDS". The headers, and potentially any other information that you might want to display in the headers, are stored in this "_BANDS" object in an Array.
This sample can be adapted to use a GraphLinksModel instead of a TreeModel and a LayeredDigraphLayout instead of a TreeLayout.
It is sometimes useful to display a variable number of elements in a node by data binding to a JavaScript Array. In GoJS, this is simply achieved by binding (or setting) Panel.itemArray. The Panel will create an element in the panel for each value in the Array. More information can be found in the GoJS Intro.
This predefined layout is used for placing Nodes of a tree-structured graph in layers (rows or columns). For discussion and examples of the most commonly used properties of the TreeLayout, see the Trees page in the Introduction. More information can be found in the GoJS Intro.
GoJS allows for the creation of custom layouts to meet specific needs.
There are also many layouts that are extensions -- not predefined in the go.js or go-debug.js library,
but available as source code in one of the three extension directories, with some documentation and corresponding samples.
More information can be found in the GoJS Intro.