Organizing Layers Visually with Bands
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 learn pages.
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 learn Trees page. More information can be found in the GoJS learn pages.
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 learn pages.