Radial tree layout in Angular Diagram control

28 Mar 202517 minutes to read

A Radial tree layout is a diagram that presents information in a hierarchical structure, with a central node at the core of the diagram. The central node represents the main concept or topic, and branches extend outward in a radial fashion, creating a tree-like structure. 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 the node without any incoming edges (InEdges connector count of 0) as the root node. To create radial tree, the type of the layout as RadialTree.

The RadialTree layout provides support for adding space between the nodes. The HorizontalSpacingand VerticalSpacing properties of the layout allow you to set the space between the nodes. The arrangement results in an ever-expanding concentric arrangement with radial proximity to the root node indicating the node level in the hierarchy.

Radial tree with DataSource

You can create a radial tree layout with DataSource. The following code example illustrates how to create a radial tree layout using a data source.

app.component.ts
main.ts
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, NodeModel, SnapSettingsModel, LayoutModel, DataSourceModel, DataBinding,
  DiagramModule, RadialTreeService, DataBindingService, RadialTree, ConnectorModel, DecoratorModel } from '@syncfusion/ej2-angular-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';

Diagram.Inject(DataBinding, RadialTree);

@Component({
  imports: [DiagramModule],

  providers: [RadialTreeService, DataBindingService],
  standalone: true,
  selector: "app-container",
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="590px" [snapSettings]="snapSettings" [getNodeDefaults]="getNodeDefaults"
    [getConnectorDefaults]="getConnectorDefaults" [layout]="layout" [dataSourceSettings]="dataSourceSettings"> </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  @ViewChild("diagram")
  public diagram?: DiagramComponent;
  public snapSettings?: SnapSettingsModel;
  public items?: DataManager;
  public layout?: LayoutModel;
  public dataSourceSettings?: DataSourceModel;

  //Initializes data source
  public data: object[] = [
    {
      Id: 'parent',
      Name: 'Maria Anders',
      Designation: 'Managing Director'
    },
    {
      Id: '1',
      Name: 'Ana Trujillo',
      Designation: 'Project Manager',
      ReportingPerson: 'parent',
    },
    {
      Id: '2',
      Name: 'Lino Rodri',
      Designation: 'Project Manager',
      ReportingPerson: 'parent',
    },
    {
      Id: '3',
      Name: 'Philip Cramer',
      Designation: 'Project Manager',
      ReportingPerson: 'parent',
    },
    {
      Id: '4',
      Name: 'Pedro Afonso',
      Designation: 'Project Manager',
      ReportingPerson: 'parent',
    },
    {
      Id: '15',
      Name: 'Paul Henriot',
      Designation: 'Project Manager',
      ReportingPerson: 'parent',
    },
    {
      Id: '18',
      Name: 'Laura Callahan',
      Designation: 'Project Manager',
      ReportingPerson: 'parent',
    },
    {
      Id: '5',
      Name: 'Anto Moreno',
      Designation: 'Project Lead',
      ReportingPerson: '1',
    },
    {
      Id: '6',
      Name: 'Elizabeth Roel',
      Designation: 'Project Lead',
      ReportingPerson: '1',
    },
    {
      Id: '7',
      Name: 'Aria Cruz',
      Designation: 'Project Lead',
      ReportingPerson: '18',
    },
    {
      Id: '8',
      Name: 'Eduardo Roel',
      Designation: 'Project Lead',
      ReportingPerson: '18',
    },
    {
      Id: '9',
      Name: 'Howard Snyd',
      Designation: 'Project Lead',
      ReportingPerson: '2',
    },
    {
      Id: '10',
      Name: 'Daniel Tonini',
      Designation: 'Project Lead',
      ReportingPerson: '2',
    },
    {
      Id: '11',
      Name: 'Nardo Batista',
      Designation: 'Project Lead',
      ReportingPerson: '3',
    },
    {
      Id: '12',
      Name: 'Michael Holz',
      Designation: 'Project Lead',
      ReportingPerson: '3',
    },
    {
      Id: '13',
      Name: 'Kloss Perrier',
      Designation: 'Project Lead',
      ReportingPerson: '4',
    },
    {
      Id: '14',
      Name: 'Liz Nixon',
      Designation: 'Project Lead',
      ReportingPerson: '4',
    },
    {
      Id: '16',
      Name: 'Paula Parente',
      Designation: 'Project Lead',
      ReportingPerson: '15',
    },
    {
      Id: '17',
      Name: 'Matti Kenna',
      Designation: 'Project Lead',
      ReportingPerson: '15',
    }
  ];

  //Sets the default properties for nodes
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 20;
    node.width = 20;
    return node;
  }

  //Sets the default properties for connectors
  public getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
    (connector.targetDecorator as DecoratorModel).shape = 'None';
    connector.type = 'Straight';
    return connector;
  }

  ngOnInit(): void {
    this.snapSettings = { constraints: 0 }
    this.items = new DataManager(this.data as JSON[], new Query().take(7));

    //Uses layout to auto-arrange nodes on the Diagram page
    this.layout = {
      //set layout type
      type: 'RadialTree',
      root: 'parent'
    }

    //Configures data source for Diagram
    this.dataSourceSettings = {
      id: 'Id',
      parentId: 'ReportingPerson',
      dataSource: this.items
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

NOTE

If you want to convert the data source into layout, you need to inject DataBinding along with RadialTree module in the diagram.

Radial tree with nodes and connectors

You can render a radial tree layout without using DataSource. The following code demonstrates how to render a radial tree layout without using data source.

app.component.ts
main.ts
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, NodeModel, ConnectorModel, SnapSettingsModel, LayoutModel, DiagramModule,
  RadialTreeService, DataBindingService, DataBinding, RadialTree, DecoratorModel} from '@syncfusion/ej2-angular-diagrams';

Diagram.Inject(DataBinding, RadialTree);

@Component({
  imports: [DiagramModule],

  providers: [RadialTreeService, DataBindingService],
  standalone: true,
  selector: "app-container",
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="590px" [nodes]="nodes" [connectors]="connectors"
  [getNodeDefaults]="getNodeDefaults" [getConnectorDefaults]="getConnectorDefaults" [snapSettings]="snapSettings" [layout]="layout"> </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  @ViewChild("diagram")
  public diagram?: DiagramComponent;
  public snapSettings?: SnapSettingsModel;
  public layout?: LayoutModel;

  //Initializes Nodes for diagram
  public nodes: NodeModel[] = [
    { id: 'Maria Anders' },
    { id: 'Ana Trujillo' },
    { id: 'Lino Rodri' },
    { id: 'Philip Cramer' },
    { id: 'Pedro Afonso' },
    { id: 'Paul Henriot' },
    { id: 'Laura Callahan' },
    { id: 'Anto Moreno' },
    { id: 'Elizabeth Roel' },
    { id: 'Aria Cruz' },
    { id: 'Eduardo Roel' },
    { id: 'Howard Snyd' },
    { id: 'Daniel Tonini' },
    { id: 'Nardo Batista' },
    { id: 'Michael Holz' },
    { id: 'Kloss Perrier' },
    { id: 'Liz Nixon' },
    { id: 'Paula Parente' },
    { id: 'Matti Kenna' },
  ];

  //Initializes Connectors for diagram
  public connectors: ConnectorModel[] = [
    {
      id: 'Maria Anders-Ana Trujillo',
      sourceID: 'Maria Anders',
      targetID: 'Ana Trujillo',
    },
    {
      id: 'Maria Anders-Lino Rodri',
      sourceID: 'Maria Anders',
      targetID: 'Lino Rodri',
    },
    {
      id: 'Maria Anders-Philip Cramer',
      sourceID: 'Maria Anders',
      targetID: 'Philip Cramer',
    },
    {
      id: 'Maria Anders-Pedro Afonso',
      sourceID: 'Maria Anders',
      targetID: 'Pedro Afonso',
    },
    {
      id: 'Maria Anders-Paul Henriot',
      sourceID: 'Maria Anders',
      targetID: 'Paul Henriot',
    },
    {
      id: 'Maria Anders-Laura Callahan',
      sourceID: 'Maria Anders',
      targetID: 'Laura Callahan',
    },
    {
      id: 'Ana Trujillo-Anto Moreno',
      sourceID: 'Ana Trujillo',
      targetID: 'Anto Moreno',
    },
    {
      id: 'Ana Trujillo-Elizabeth Roel',
      sourceID: 'Ana Trujillo',
      targetID: 'Elizabeth Roel',
    },
    {
      id: 'Laura Callahan-Aria Cruz',
      sourceID: 'Laura Callahan',
      targetID: 'Aria Cruz',
    },
    {
      id: 'Laura Callahan-Eduardo Roel',
      sourceID: 'Laura Callahan',
      targetID: 'Eduardo Roel',
    },
    {
      id: 'Lino Rodri-Howard Snyd',
      sourceID: 'Lino Rodri',
      targetID: 'Howard Snyd',
    },
    {
      id: 'Lino Rodri-Daniel Tonini',
      sourceID: 'Lino Rodri',
      targetID: 'Daniel Tonini',
    },
    {
      id: 'Philip Cramer-Nardo Batista',
      sourceID: 'Philip Cramer',
      targetID: 'Nardo Batista',
    },
    {
      id: 'Philip Cramer-Michael Holz',
      sourceID: 'Philip Cramer',
      targetID: 'Michael Holz',
    },
    {
      id: 'Pedro Afonso-Kloss Perrier',
      sourceID: 'Pedro Afonso',
      targetID: 'Kloss Perrier',
    },
    {
      id: 'Pedro Afonso-Liz Nixon',
      sourceID: 'Pedro Afonso',
      targetID: 'Liz Nixon',
    },
    {
      id: 'Paul Henriot-Paula Parente',
      sourceID: 'Paul Henriot',
      targetID: 'Paula Parente',
    },
    {
      id: 'Paul Henriot-Matti Kenna',
      sourceID: 'Paul Henriot',
      targetID: 'Matti Kenna',
    }
  ];

  //Sets the default properties for nodes
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.height = 20;
    node.width = 20;
    return node;
  }

    //Sets the default properties for connectors
    public getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
      (connector.targetDecorator as DecoratorModel).shape = 'None';
      connector.type = 'Straight';
      return connector;
    }

  ngOnInit(): void {
    this.snapSettings = { constraints: 0 }

    //Uses layout to auto-arrange nodes on the Diagram page
    this.layout = {
      //set the type as Radial Tree
      type: 'RadialTree',
      root: 'parent'
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

NOTE

If you want to use radial tree layout in diagram, you need to inject RadialTree in the diagram.

Radial tree