Radial Tree Layout in Blazor Diagram Component
12 Jul 20246 minutes to read
The radial tree layout arranges nodes on a virtual concentric circle around a root node. Sub-trees formed by the branching of child nodes are located radially around the child nodes. This arrangement result in an ever-expanding concentric arrangement with radial proximity to the root node indicating the node level in the hierarchy. The layout Root property can be used to define the root node of the layout. When no root node is set, the algorithm automatically considers one of the diagram nodes as the root node.
To arrange nodes in a radial tree structure, set the Type of the layout as RadialTree. The following code illustrates how to arrange the nodes in a radial tree structure.
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
<SfDiagram Height="600px" NodeDefaults="@NodeDefaults" ConnectorDefaults="@ConnectorDefault" Layout="@LayoutSetting">
<DiagramDataSource Id="Id" ParentId="ReportingPerson" DataSource="@DataSource" DataMapSettings="@DataMap"></DiagramDataSource>
</SfDiagram>
@code{
//Uses layout to auto-arrange nodes on the diagram page
DiagramLayout LayoutSetting = new DiagramLayout()
{
//Sets layout type as RadialTree...
Type = LayoutType.RadialTree,
VerticalSpacing = 20,
HorizontalSpacing = 20
};
//sets Data map setting
List<DiagramDataMapSetting> DataMap { get; set; } = new List<DiagramDataMapSetting>() {
//Data mapping for the label
new DiagramDataMapSetting() { Property = "Annotations[0].Content",
Field = "Name" },
};
//Sets the default properties for nodes and connectors
DiagramNode NodeDefaults = new DiagramNode()
{
Height = 100,
Width = 100,
//sets the default node's shape
Shape = new DiagramShape()
{
Type = Syncfusion.Blazor.Diagrams.Shapes.Basic,
BasicShape = BasicShapes.Ellipse
},
//sets the default node's annotation with style
Annotations = new ObservableCollection<DiagramNodeAnnotation>()
{
new DiagramNodeAnnotation()
{
Id = "label1",
Style = new AnnotationStyle()
{
Color = "white"
}
}
},
//sets the default node's shape style
Style = new NodeShapeStyle
{
Fill = "#6BA5D7",
StrokeColor = "white"
}
};
DiagramConnector ConnectorDefault = new DiagramConnector
{
Type = Syncfusion.Blazor.Diagrams.Segments.Straight,
//sets the default connector's style
Style = new ConnectorShapeStyle()
{
StrokeColor = "#6BA5D7",
StrokeWidth = 2
},
//sets the connector's target decorator
TargetDecorator = new ConnectorTargetDecorator()
{
Shape = DecoratorShapes.None,
//sets decorator shape style
Style = new DecoratorShapeStyle()
{
Fill = "#6BA5D7",
StrokeColor = "#6BA5D7",
},
}
};
//Initialize radial tree data
public class RadialTreeDetails
{
public string Id { get; set; }
public string Name { get; set; }
public string Designation { get; set; }
public string ReportingPerson { get; set; }
}
//Configures data source for diagram
public object DataSource = new List<object>()
{
new RadialTreeDetails {Id = "parent", Name = "Maria Anders",Designation = "Managing Director", ReportingPerson = "" },
new RadialTreeDetails {Id = "1", Name= "Ana Trujillo", Designation= "Project Manager", ReportingPerson= "parent" },
new RadialTreeDetails {Id ="2",Name= "Lino Rodri", Designation="Project Manager",ReportingPerson= "parent" },
new RadialTreeDetails {Id="3",Name = "Philip Cramer",Designation = "Project Manager",ReportingPerson= "parent" },
new RadialTreeDetails {Id="4",Name= "Pedro Afonso",Designation= "Project Manager",ReportingPerson= "parent" },
new RadialTreeDetails {Id ="5", Name="Anto Moreno",Designation= "Project Lead",ReportingPerson= "parent" },
new RadialTreeDetails {Id="6",Name = "Elizabeth Roel",Designation= "Project Lead",ReportingPerson= "parent" },
new RadialTreeDetails {Id="8",Name= "Eduardo Roel",Designation= "Project Lead",ReportingPerson= "parent" },
new RadialTreeDetails {Id="9",Name= "Howard Snyd",Designation= "Project Lead",ReportingPerson= "parent" },
new RadialTreeDetails {Id="10",Name= "Daniel Tonini",Designation= "Project Lead",ReportingPerson= "parent" },
new RadialTreeDetails {Id="11",Name= "Nardo Batista",Designation= "Project Lead",ReportingPerson= "parent" },
};
}