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.

### GoJS Features in this sample

#### Item Arrays

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.

Related samples

#### Tree Layout

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.

Related samples

#### Custom Layouts

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.

Related samples