You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -26,7 +26,7 @@ The Tree Diagram layout positions the shapes in a hierarchical way. A typical us
26
26
27
27
### Tree Layout Subtypes
28
28
29
-
The Layered Diagram layout has the following sub types:
29
+
The Tree Diagram layout has the following sub types:
30
30
31
31
*`Down`—the root shape is at the top and all descendants are arranged below it.
32
32
*`Left`—the root shape is on the right.
@@ -37,12 +37,44 @@ The Layered Diagram layout has the following sub types:
37
37
*`TipOver`—a variation of the `Down` sub type. The root shape is at the top. The direct children are arranged horizontally in a row, while the grand children are arranged verticallu on columns.
38
38
*`Up`—the root shape is at the bottom.
39
39
40
-
>caption Setting a Tree Diagram Layout Subtype
40
+
`<DiagramLayout>` provides apperance settings that apply to specific tree layout sub types. The snippets below list these settings and their default values. `HorizontalSeparation` and `VerticalSeparation` apply to all sub types, except `Radial`.
41
+
42
+
>caption Using a classic Tree Diagram Layout
43
+
44
+
````RAZOR.skip-repl
45
+
<TelerikDiagram>
46
+
<DiagramLayout Type="@DiagramLayoutType.Tree"
47
+
Subtype="@DiagramLayoutSubtype.Down"
48
+
HorizontalSeparation="90"
49
+
VerticalSeparation="50" />
50
+
</TelerikDiagram>
51
+
````
52
+
53
+
>caption Using a Radial Tree Diagram Layout
54
+
55
+
````RAZOR.skip-repl
56
+
<TelerikDiagram>
57
+
<DiagramLayout Type="@DiagramLayoutType.Tree"
58
+
Subtype="@DiagramLayoutSubtype.Radial"
59
+
StartRadialAngle="0"
60
+
EndRadialAngle="360"
61
+
RadialSeparation="150"
62
+
RadialFirstLevelSeparation="200" />
63
+
</TelerikDiagram>
64
+
````
65
+
66
+
When using the Tree `TipOver` sub type, the `HorizontalSeparation` and `VerticalSeparation` parameters affect the distances between shapes at the initial levels, which are not affected by the tipover algorithm. The number of these levels depends on the value of `TipOverTreeStartLevel`.
67
+
68
+
>caption Using a TipOver Tree Diagram Layout
41
69
42
70
````RAZOR.skip-repl
43
71
<TelerikDiagram>
44
72
<DiagramLayout Type="@DiagramLayoutType.Tree"
45
-
Subtype="@DiagramLayoutSubtype.Radial" />
73
+
Subtype="@DiagramLayoutSubtype.TipOver"
74
+
TipOverTreeStartLevel="1"
75
+
UnderneathHorizontalOffset="15"
76
+
UnderneathVerticalSeparation="15"
77
+
UnderneathVerticalTopOffset="15" />
46
78
</TelerikDiagram>
47
79
````
48
80
@@ -62,11 +94,14 @@ The layered layout works best with:
62
94
63
95
When the graph is a tree, the layout reduces to a standard tree layout and thus can be considered as an extension to the classic tree layout.
64
96
97
+
The `LayerSeparation` parameter sets the distance between the layout layers. The default value is `50`.
@@ -92,18 +127,25 @@ The Layered Diagram layout has the following sub types. Each subtype name signif
92
127
93
128
The [Force-directed Diagram layout](https://en.wikipedia.org/wiki/Force-directed_graph_drawing) (also known as the spring-embedder algorithm) is based on a physical simulation of forces acting on the Diagram nodes (shapes), whereby the connections define whether two nodes act upon each other. Each link is like a spring embedded in the Diagram. The simulation attempts to find a minimum energy state, so that the springs are in their base state and do not pull or push any linked node.
94
129
95
-
> The force-directed Diagram layout is non-deterministic. Each layout pass is unique, unpredictable, and not reproducible.
130
+
The force-directed Diagram layout is non-deterministic. Each layout pass is unique, unpredictable, and not reproducible.
131
+
132
+
The layout provides two settings that affect the final appearance:
133
+
134
+
*`NodeDistance` defines the optimal distance between the shapes for minimum energy state. The default value is `50`.
135
+
*`Iterations` sets the number of position calculations. A larger number produces better results, but is more resource-intensive. The default value is `300`.
136
+
137
+
The force-directed layout type has no subtypes.
96
138
97
139
>caption Using the Force Diagram Layout
98
140
99
141
````RAZOR.skip-repl
100
142
<TelerikDiagram>
101
-
<DiagramLayout Type="@DiagramLayoutType.Force" />
143
+
<DiagramLayout Type="@DiagramLayoutType.Force"
144
+
Iterations="300"
145
+
NodeDistance="50" />
102
146
</TelerikDiagram>
103
147
````
104
148
105
-
The force-directed layout type has no subtypes.
106
-
107
149
## Example
108
150
109
151
The following example demonstrates all Diagram layout types and sub types.
@@ -317,46 +359,78 @@ The `<DiagramLayoutGrid>` tag exposes settings that allow you to define:
317
359
* The horizontal and vertical distance (offset) between the components and the Diagram boundaries.
318
360
* The width of the layout grid. If the width is large enough, the Diagram displays multiple components (groups) in a single row. Otherwise the components fall one below another.
319
361
362
+
The following example starts with the default values of the `DiagramLayoutGrid` parameters, except the `Width` which has a default value of `1500`. Use the Up and Down arrow keys to change the NumericTextBox values more easily and observe the result.
0 commit comments