• Public
  • Public/Protected
  • All

Class RadialLayout Extension

This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. Extensions can be found in the GoJS kit under the extensions (for loading via script tags),extensionsTS (UMD modules), or extensionsJSM (ES6 modules) folders. See the Extensions intro page for more information.


Given a root Node, this arranges connected nodes in concentric rings, layered by the minimum link distance from the root.

If you want to experiment with this extension, try the Radial Layout sample.


Inherited Members


  • Create a minimal layout that only positions Nodes that do not have a location.


    • Optional init: Partial<Layout>

      Optional initialization properties.

    Returns RadialLayout


  • Gets or sets the thickness of each ring representing a layer.

    The default value is 100.

  • Gets or sets the maximum number of layers to be shown, in addition to the root node at layer zero.

    The default value is Infinity.

  • Gets or sets the Node that acts as the root or central node of the radial layout.


  • Copies properties to a cloned Layout.


    Returns void

  • commitLayers(): void
  • Override this method in order to create background circles indicating the layers of the radial layout. By default this method does nothing.

    Returns void

  • commitLayout(): void
  • This override positions each Node and also calls rotateNode.

    Returns void

  • computeBreadth(v: RadialVertex): number
  • Compute the proportion of arc that the given vertex should take relative to its siblings.

    The default behavior is to give each child arc according to the sum of the maximum breadths of each of its children. This assumes that all nodes have the same breadth -- i.e. that they will occupy the same sweep of arc. It does not take the Node.actualBounds into account, nor the angle at which the node will be location relative to the origin, nor the distance the node will be from the root node.

    In order to give each child of a vertex the same fraction of arc, override this method: computeBreadth(v) { return 1; }

    In order to give each child of a vertex a fraction of arc proportional to how many children the child has: computeBreadth(v) { return Math.max(1, v.children.length); }


    • v: RadialVertex

    Returns number

  • Use a LayoutNetwork that always creates RadialVertexes.

    Returns LayoutNetwork

  • rotateNode(node: Node, angle: number, sweep: number, radius: number): void
  • Override this method in order to modify each node as it is laid out. By default this method does nothing.


    • node: Node
    • angle: number
    • sweep: number
    • radius: number

    Returns void