This sample displays a diagram of two or more sets of nodes intended to be arranged in concentric circles. Note how because there are so many nodes in layer #2, with the orange nodes, its radius has to be larger than the radius of the inner layer #1 in order to avoid overlapping nodes. And the outer layer #3, with the gold nodes, there is greater space between the nodes because there are fewer nodes and the radius is larger.

Unlike many GoJS apps, there is no Diagram.layout assigned. Layouts are performed explicitly in code -- a separate CircularLayout for each subset of nodes. Each layout's radius is determined by the CircularLayout.actualXRadius of the previous layout, except the first one which uses a radius of NaN, letting the nodes in layer #1 determine the natural radius that is required to avoid node overlaps.


GoJS Features in this sample

Collections

GoJS provides its own collection classes: List, Set, and Map. You can iterate over a collection by using an Iterator. More information can be found in the GoJS Intro.

Related samples


Circular Layout

This predefined layout is used for placing Nodes in a cirular or elliptical arrangement. More information can be found in the GoJS Intro.

Related samples