markgojs

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>GoJS® CircularLayout Class</title> <script src="../../assets/js/jquery.min.js"></script> <script src="../../assets/js/bootstrap.min.js"></script> <script src="../../assets/js/highlight.js"></script> <script src="../../assets/js/api.js"></script> <script src="../../assets/js/fuse.min.js"></script> <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >  <link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/> <link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>  <link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" /> </head> <body>  <nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top"> <div class="container-fluid"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#navbar"> <a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="../../index.html">Home</a></li> <li><a href="../../learn/index.html">Learn</a></li> <li><a href="../../samples/index.html">Samples</a></li> <li><a href="../../intro/index.html">Intro</a></li> <li><a href="../../api/index.html">API</a></li> <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li> <li><a href="../../download.html">Download</a></li> <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li> <li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li> <li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li> <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li> </ul> </div> </div> </nav> <div class="container-fluid">  <div id="navindex" class="col-md-2">   <div class="sidebar-nav"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#DiagramNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Diagram Classes</span> </div> </div> <div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li> <li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li> <li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li> <li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li> <li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li> <li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li> <li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li> <li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li> <li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li> <li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li> <li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li> <li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li> <li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li> <li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li> <li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li> <li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li> <li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li> <li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li> <li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li> <li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#GeometryNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Geometry Classes</span> </div> </div> <div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li> <li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li> <li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li> <li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li> <li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li> <li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li> <li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li> <li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li> <li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#ModelNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Model Classes</span> </div> </div> <div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li> <li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li> <li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li> <li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li> <li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li> <li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li> <li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#LayoutNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Layout Classes</span> </div> </div> <div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li> <li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li> <li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li> <li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li> <li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li> <li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li> <li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#ToolNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Tool Classes</span> </div> </div> <div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li> <li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li> <li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li> <li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li> <li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li> <li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li> <li><a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></li> <li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li> <li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li> <li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li> <li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li> <li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li> <li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li> <li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li> <li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li> <li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li> <li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#CollectionNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Collection Classes</span> </div> </div> <div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li> <li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li> <li><a href="../symbols/List.html" class="linkConstructor">List</a></li> <li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li> <li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li> </ul> </div> </div> </div>   </div> <div id="contentBody" class="col-md-10"> <div class="searchsumm"> <div class="table-wrap"> <div class="table-cell" id="apisearch" data-base="../"> <div class="title">Search API</div> <div class="field"> <label for="search-field" class="search-icon"></label> <input id="search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> </div> <div class="table-cell" id="apisumm"> <input type="checkbox" id="showsumms" /> <label class="apisumms" for="showsumms">Show Summaries</label> </div> </div> </div>  <div id="header" class="fineprint"> <b>GoJS</b>® Diagramming Components<br/>version 1.8.36 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a> </div>  <h2 class="classTitle"> Class CircularLayout </h2>  <p class="classsummary"> <span class="extends"> Extends <a href="../symbols/Layout.html" class="linkConstructor">Layout</a>.</span> This layout positions nodes in a circular arrangement. There are several samples that use CircularLayout. The layout cannot guarantee that it provides optimal positioning of nodes when trying to minimize link crossings. <p class="boxrun"> If you want to experiment interactively with most of the properties, try the <a href="../../samples/cLayout.html">Circular Layout</a> sample. See samples that make use of CircularLayout in the <a href="../../samples/index.html#circularlayout">samples index</a>. <p> This layout makes use of a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> of <a href="../symbols/CircularVertex.html" class="linkConstructor">CircularVertex</a>es and <a href="../symbols/CircularEdge.html" class="linkConstructor">CircularEdge</a>s that normally correspond to the <a href="../symbols/Node.html" class="linkConstructor">Node</a>s and <a href="../symbols/Link.html" class="linkConstructor">Link</a>s of the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>. </p>  <h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2> <div class="table-responsive"> <table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class CircularLayout."> <thead> <tr> <th scope="col" class="name">Name</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr> <td class="name" > <div class="name"> CircularLayout() </div> </td> <td class="description"> <div class="description"> <p><p>Constructs a <a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a> with no <a href="../symbols/Layout.html#network" class="linkProperty">Layout.network</a> and with no owning <a href="../symbols/Layout.html#diagram" class="linkProperty">Layout.diagram</a>. </div> </td> </tr> </tbody> </table> </div>  <h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2> <div class="table-responsive"> <table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class CircularLayout."> <thead> <tr> <th scope="col" class="name">Name, Value Type</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr id="actualCenter" > <td class="name"> <div class="name"> actualCenter </div> <div class="attributes"> <span class="light">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span> </div> </td> <td class="description"> <div class="description">  <p>This read-only property is the coordinates of the center of the laid-out ellipse after the layout. </div> </td> </tr> <tr id="actualSpacing" > <td class="name"> <div class="name"> actualSpacing </div> <div class="attributes"> <span class="light">{number}</span> </div> </td> <td class="description"> <div class="description">  <p>This read-only property is the effective spacing that may have been calculated by the layout. </div> </td> </tr> <tr id="actualXRadius" > <td class="name"> <div class="name"> actualXRadius </div> <div class="attributes"> <span class="light">{number}</span> </div> </td> <td class="description"> <div class="description">  <p>This read-only property is the effective X radius that may have been calculated by the layout. </div> </td> </tr> <tr id="actualYRadius" > <td class="name"> <div class="name"> actualYRadius </div> <div class="attributes"> <span class="light">{number}</span> </div> </td> <td class="description"> <div class="description">  <p>This read-only property is the effective Y radius that may have been calculated by the layout. </div> </td> </tr> <tr id="arrangement" > <td class="name"> <div class="name"> arrangement </div> <div class="attributes"> <span class="light">{EnumValue}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets how the nodes are spaced.<span class="nodetails" id="xproparrangement"><a class="morelink" onclick="hst('proparrangement')">More...</a></span> <span class="details" id="proparrangement"> If <a href="../symbols/CircularLayout.html#arrangement" class="linkProperty">arrangement</a> === <a href="../symbols/CircularLayout.html#Packed" class="linkConstant">CircularLayout.Packed</a>, the specified <a href="../symbols/CircularLayout.html#radius" class="linkProperty">radius</a> will be ignored. </span><div class="details" id="dproparrangement"><p> The default value is <a href="../symbols/CircularLayout.html#ConstantSpacing" class="linkConstant">CircularLayout.ConstantSpacing</a>.</div> </div> </td> </tr> <tr id="aspectRatio" > <td class="name"> <div class="name"> aspectRatio </div> <div class="attributes"> <span class="light">{number}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the ratio of the arrangement's height to its width (1 for a circle, >1 for a vertically elongated ellipse).<span class="nodetails" id="xpropaspectRatio"><a class="morelink" onclick="hst('propaspectRatio')">More...</a></span> <span class="details" id="propaspectRatio"> </span><div class="details" id="dpropaspectRatio"><p> This is 1 by default. The value must be a positive number. <p> Modifying this value changes the height, but keeps the width and the <a href="../symbols/CircularLayout.html#radius" class="linkProperty">radius</a> constant.</div> </div> </td> </tr> <tr id="comparer" > <td class="name"> <div class="name"> comparer </div> <div class="attributes"> <span class="light">{function(CircularVertex, CircularVertex):number}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the comparer which sorts the data when <a href="../symbols/CircularLayout.html#sorting" class="linkProperty">sorting</a> is set to <a href="../symbols/CircularLayout.html#Ascending" class="linkConstant">CircularLayout.Ascending</a> or <a href="../symbols/CircularLayout.html#Descending" class="linkConstant">CircularLayout.Descending</a>.<span class="nodetails" id="xpropcomparer"><a class="morelink" onclick="hst('propcomparer')">More...</a></span> <span class="details" id="propcomparer"> </span><div class="details" id="dpropcomparer"><p> The default function compares the <a href="../symbols/Part.html#text" class="linkProperty">Part.text</a> values of the vertexes' <a href="../symbols/LayoutVertex.html#node" class="linkProperty">LayoutVertex.node</a>s.</div> </div> </td> </tr> <tr id="direction" > <td class="name"> <div class="name"> direction </div> <div class="attributes"> <span class="light">{EnumValue}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets whether the nodes are arranged clockwise or counterclockwise.<span class="nodetails" id="xpropdirection"><a class="morelink" onclick="hst('propdirection')">More...</a></span> <span class="details" id="propdirection"> </span><div class="details" id="dpropdirection"><p> The default value is <a href="../symbols/CircularLayout.html#Clockwise" class="linkConstant">CircularLayout.Clockwise</a>.</div> </div> </td> </tr> <tr id="nodeDiameterFormula" > <td class="name"> <div class="name"> nodeDiameterFormula </div> <div class="attributes"> <span class="light">{EnumValue}</span> </div> </td> <td class="description"> <div class="description">  <p>Specifies how the diameter of nodes will be calculated.<span class="nodetails" id="xpropnodeDiameterFormula"><a class="morelink" onclick="hst('propnodeDiameterFormula')">More...</a></span> <span class="details" id="propnodeDiameterFormula"> When a node is not circular, it is not clear what its diameter is. </span><div class="details" id="dpropnodeDiameterFormula"><p> The default is <a href="../symbols/CircularLayout.html#Pythagorean" class="linkConstant">CircularLayout.Pythagorean</a>.</div> </div> </td> </tr> <tr id="radius" > <td class="name"> <div class="name"> radius </div> <div class="attributes"> <span class="light">{number}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the horizontal radius of the elliptical arrangement.<span class="nodetails" id="xpropradius"><a class="morelink" onclick="hst('propradius')">More...</a></span> <span class="details" id="propradius"> </span><div class="details" id="dpropradius"><p> The default value is NaN. NaN indicates that the <a href="../symbols/CircularLayout.html#spacing" class="linkProperty">spacing</a> will determine the size of the ring. If <a href="../symbols/CircularLayout.html#spacing" class="linkProperty">spacing</a> is also NaN, the effective spacing will be 6. If <a href="../symbols/CircularLayout.html#spacing" class="linkProperty">spacing</a> is a number, the effective radius will be > radius if and only if the spacing between elements would otherwise be less than spacing. The specified value for <a href="../symbols/CircularLayout.html#radius" class="linkProperty">radius</a> will be ignored if <a href="../symbols/CircularLayout.html#arrangement" class="linkProperty">arrangement</a> === <a href="../symbols/CircularLayout.html#Packed" class="linkConstant">CircularLayout.Packed</a>. This property must always be positive or NaN.</div> </div> </td> </tr> <tr id="sorting" > <td class="name"> <div class="name"> sorting </div> <div class="attributes"> <span class="light">{EnumValue}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets if and how the nodes are sorted.<span class="nodetails" id="xpropsorting"><a class="morelink" onclick="hst('propsorting')">More...</a></span> <span class="details" id="propsorting"> </span><div class="details" id="dpropsorting"><p> <a href="../symbols/CircularLayout.html#Forwards" class="linkConstant">CircularLayout.Forwards</a> indicates that the nodes are arranged in the order the layout gets them. <a href="../symbols/CircularLayout.html#Reverse" class="linkConstant">CircularLayout.Reverse</a> indicates that the nodes are arranged in the reverse order that the layout gets them. <a href="../symbols/CircularLayout.html#Ascending" class="linkConstant">CircularLayout.Ascending</a> and <a href="../symbols/CircularLayout.html#Descending" class="linkConstant">CircularLayout.Descending</a> indicate that the nodes will be sorted using the <a href="../symbols/CircularLayout.html#comparer" class="linkProperty">comparer</a>. <a href="../symbols/CircularLayout.html#Optimized" class="linkConstant">CircularLayout.Optimized</a> indicates that the nodes will be arranged to minimize link crossings. <p> The default value is <a href="../symbols/CircularLayout.html#Optimized" class="linkConstant">CircularLayout.Optimized</a>.</div> </div> </td> </tr> <tr id="spacing" > <td class="name"> <div class="name"> spacing </div> <div class="attributes"> <span class="light">{number}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the distance between nodes (if <a href="../symbols/CircularLayout.html#radius" class="linkProperty">radius</a> is NaN) or the minimum distance between nodes (if <a href="../symbols/CircularLayout.html#radius" class="linkProperty">radius</a> is a number).<span class="nodetails" id="xpropspacing"><a class="morelink" onclick="hst('propspacing')">More...</a></span> <span class="details" id="propspacing"> </span><div class="details" id="dpropspacing"><p> The default value is 6. The value may be NaN. <p> If <a href="../symbols/CircularLayout.html#spacing" class="linkProperty">spacing</a> is NaN, there is no minimum spacing, allowing nodes to overlap, unless <a href="../symbols/CircularLayout.html#radius" class="linkProperty">radius</a> is NaN, in which case the effective spacing will be 6 to determine an effective radius. If <a href="../symbols/CircularLayout.html#spacing" class="linkProperty">spacing</a> is a number but <a href="../symbols/CircularLayout.html#radius" class="linkProperty">radius</a> isn't, the effective spacing will be spacing, and this will determine the effective radius. If both <a href="../symbols/CircularLayout.html#spacing" class="linkProperty">spacing</a> and <a href="../symbols/CircularLayout.html#radius" class="linkProperty">radius</a> are numbers, the effective radius will be at least <a href="../symbols/CircularLayout.html#radius" class="linkProperty">radius</a>, but may be larger so that the minimum spacing between nodes is <a href="../symbols/CircularLayout.html#spacing" class="linkProperty">spacing</a>.</div> </div> </td> </tr> <tr id="startAngle" > <td class="name"> <div class="name"> startAngle </div> <div class="attributes"> <span class="light">{number}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the angle (in degrees, clockwise from the positive side of the X axis) of the first element.<span class="nodetails" id="xpropstartAngle"><a class="morelink" onclick="hst('propstartAngle')">More...</a></span> <span class="details" id="propstartAngle"> </span><div class="details" id="dpropstartAngle"><p> The default value is 0.</div> </div> </td> </tr> <tr id="sweepAngle" > <td class="name"> <div class="name"> sweepAngle </div> <div class="attributes"> <span class="light">{number}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the absolute angle (in degrees) between the first and last node.<span class="nodetails" id="xpropsweepAngle"><a class="morelink" onclick="hst('propsweepAngle')">More...</a></span> <span class="details" id="propsweepAngle"> </span><div class="details" id="dpropsweepAngle"><p> The default value is 360. The value must be greater than zero and less than or equal to 360. If it is not in this range, it will be automatically set to 360. <p> Whether the arrangement is clockwise or counterclockwise does not depend on the sign of this value. The direction can be controlled by setting <a href="../symbols/CircularLayout.html#direction" class="linkProperty">direction</a>. If 360 is the specified value, the actual value will be less to keep the first and last elements from overlapping, and the spacing between the first and last nodes will be determined the same way as for all other adjacent nodes.</div> </div> </td> </tr> </tbody> </table> </div> <dl class="inheritsList"> <dt>Properties borrowed from class <a href="../symbols/Layout.html" class="linkConstructor">Layout</a>: </dt><dd><a href="../symbols/Layout.html#arrangementOrigin" class="linkProperty">arrangementOrigin</a>, <a href="../symbols/Layout.html#diagram" class="linkProperty">diagram</a>, <a href="../symbols/Layout.html#group" class="linkProperty">group</a>, <a href="../symbols/Layout.html#isInitial" class="linkProperty">isInitial</a>, <a href="../symbols/Layout.html#isOngoing" class="linkProperty">isOngoing</a>, <a href="../symbols/Layout.html#isRealtime" class="linkProperty">isRealtime</a>, <a href="../symbols/Layout.html#isRouting" class="linkProperty">isRouting</a>, <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a>, <a href="../symbols/Layout.html#isViewportSized" class="linkProperty">isViewportSized</a>, <a href="../symbols/Layout.html#network" class="linkProperty">network</a></dd> </dl>  <h2 class="summaryCaption">Method <span class="nodetails"> Summary</span><span class="details"> Details</span></h2> <div class="table-responsive"> <table class="summaryTable table table-bordered table-condensed" summary="A summary of the methods documented in the class CircularLayout."> <thead> <tr> <th scope="col" class="name">Name, Return Type</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr id="commitLayout"> <td class="name"> <div class="name"> commitLayout() </div> <div class="attributes"> </div> </td> <td class="description"> <div class="description"> <p><p>Position each <a href="../symbols/Node.html" class="linkConstructor">Node</a> according to the Vertex position, and then position the <a href="../symbols/Link.html" class="linkConstructor">Link</a>s.<span class="nodetails" id="xmethcommitLayout"><a class="morelink" onclick="hst('methcommitLayout')">More...</a></span> <span class="details" id="methcommitLayout"> </span><div class="details" id="dmethcommitLayout"><p> You should not call this method -- it is a "protected virtual" method.</div> </div> </td> </tr> <tr id="commitLinks"> <td class="name"> <div class="name"> commitLinks() </div> <div class="attributes"> </div> </td> <td class="description"> <div class="description"> <p><p>Commit the position and routing of all edge links.<span class="nodetails" id="xmethcommitLinks"><a class="morelink" onclick="hst('methcommitLinks')">More...</a></span> <span class="details" id="methcommitLinks"> This is called by <a href="../symbols/CircularLayout.html#commitLayout" class="linkMethod">commitLayout</a>. This is only called if <a href="../symbols/Layout.html#isRouting" class="linkProperty">Layout.isRouting</a> is true. Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</span> </div> </td> </tr> <tr id="commitNodes"> <td class="name"> <div class="name"> commitNodes() </div> <div class="attributes"> </div> </td> <td class="description"> <div class="description"> <p><p>Commit the position of all vertex nodes.<span class="nodetails" id="xmethcommitNodes"><a class="morelink" onclick="hst('methcommitNodes')">More...</a></span> <span class="details" id="methcommitNodes"> Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</span> </div> </td> </tr> <tr id="createNetwork"> <td class="name"> <div class="name"> createNetwork() </div> <div class="attributes"> <span class="light">{<a href="../symbols/CircularNetwork.html" class="linkConstructor">CircularNetwork</a>}</span> </div> </td> <td class="description"> <div class="description"> <p><p>Create a new <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> of <a href="../symbols/CircularVertex.html" class="linkConstructor">CircularVertex</a>es and <a href="../symbols/CircularEdge.html" class="linkConstructor">CircularEdge</a>s. <dl class="detailList"> <dt class="heading">Returns:</dt>