This demo shows how the CircularLayout arranges the nodes in either a circle or ellipse. If any of the properties of the layout is modified, it will automatically perform another layout using the new values. The data passed into the layout can be controlled with the box on the left. The data in the layout will only be updated when the "update" button is clicked.
The Radius property allows the user to specify the horizontal radius of the ellipse. If the Spacing is set to a number other than Infinity, The effective radius may have to be larger than the specified value to allow for adequate spacing. If Radius is NaN, than the effective radius is determined by the effective spacing
The AspectRatio specifies the ratio of the ellipse's height to its width, or equivalently, its Y radius to its X radius. For a circle, this value is 1. A value of NaN or Infinity will create an effective aspect ratio of 1.
The StartAngle specifies the angle of the 0th element (in degrees, clockwise from the 3:00 position). A value of NaN or Infinity corresponds to an effective value of 0 (indicating that the zeroth node is positioned at 3:00). Any other value will produce an effective value of StartAngle % 360, eg. Setting this value to 390 or -330 will produce the same result as setting it to 30.
SweepAngle sets the difference (in degrees) between the 0th and last nodes. If the value is 90, for example, and StartAngle = 0, the zeroth node will be at 3:00 and the last one will be at 6:00. Valid values are in (0,360]. If the specified value is not in this range, a value of 360 will be used. If the value is 360, the effective sweep angle will be a little less to prevent the 0th node from getting too close to the last node
The Arrangement specifies how the nodes will be spaced in the layout. There are 4 possible values:ConstantSpacing | The distance between the edges of the nodes is constant |
ConstantDistance | The distance between the centers of the nodes is constant |
ConstantAngle | The angular distance between the centers of the nodes is constant |
Packed | The nodes are arranged assuming they are rectangular, and Radius is ignored |
The Direction indicates whether the nodes are arranged clockwise, counterclockwise, or alternate between clockwise & counterclockwise (bidirectional).
The Sorting property sets how the nodes are sorted in the layout.
Forward & Reverse indicate that the nodes are arranged either in the order given or the reverse
of the order given. Ascending & Descending indicate that the nodes are sorted using the
CircularLayout.Comparer . In the demo, the Comparer is set to sort the nodes by area.
Optimized arranges the nodes to avoid link crossings
The Spacing determines the minimum allowed spacing between nodes. If the Spacing is large enough and the Radius is specified, the effective radius may be larger than the specified value to allow for adequate spacing between nodes. A value of NaN or Infinity corresponds to an effective value of 6.
The NodeDiameterFormula specifies a method to determine the effective diameter of a node. There are 2 values for this:Pythagorean | The diameter is equal to the diagonal of a rectangle with Width & Height of node. If Spacing==0, this wil make square nodes touch at 45 degrees, but no other square nodes will touch. |
Circular | The diameter equals either the width or height of the node, whichever is larger. If Spacing==0, this will make circular nodes touch tangentially. |
NodeRotation Specifies how the nodes will be oriented in the diagram. The choices are:
Horizontal | The nodes are all oriented so their top and bottom sides are paralell to the X axis |
Paralell | The bottom side of the nodes is paralell to the edge of the ellipse |
Orthogonal | The bottom side of the nodes is orthogonal to the edge of the ellipse |
The "Count Crossings" counts the number of times two links cross over eachother in the layout.