Complex hierarchical tree layout in Angular Diagram control

28 Mar 202523 minutes to read

Complex hierarchical tree layout arranges nodes in a tree-like structure, where the child node can have more than one parent. This layout is an extended version of the hierarchical tree layout. To create a complex hierarchical tree, the type property of layout should be set as ComplexHierarchicalTree.

Complex hierarchical tree layout with nodes and connectors

The following example demonstrates how to render a complex hierarchical tree layout using nodes and connectors. To achieve this, you need to define the nodes and connectors collections and assign them to the diagram. Additionally, you need to set the layout type to ComplexHierarchicalTree.

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

Diagram.Inject(DataBinding, ComplexHierarchicalTree);

@Component({
  imports: [ DiagramModule ],
  providers: [],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="1000px" [nodes]='nodes' [connectors]='connectors'
  [getConnectorDefaults]='connectorDefaults' [getNodeDefaults]='nodeDefaults' [layout]='layout'></ejs-diagram>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;

  //Initialize nodes for diagram
  public nodes: NodeModel[] = [
    { id: 'node1' },
    { id: 'node2' },
    { id: 'node3' },
    { id: 'node4' },
    { id: 'node5' },
    { id: 'node6' },
    { id: 'node7' },
  ];

  //Initialize connectors for diagram
  public connectors: ConnectorModel[] = [
    { id: 'node1-node4', sourceID: 'node1', targetID: 'node4' },
    { id: 'node2-node4', sourceID: 'node2', targetID: 'node4' },
    { id: 'node3-node4', sourceID: 'node3', targetID: 'node4' },
    { id: 'node4-node5', sourceID: 'node4', targetID: 'node5' },
    { id: 'node4-node6', sourceID: 'node4', targetID: 'node6' },
    { id: 'node5-node6', sourceID: 'node6', targetID: 'node7' },
  ];

  //Uses layout to auto-arrange nodes on the Diagram page
  public layout: LayoutModel = {
    //Sets layout type
    type: 'ComplexHierarchicalTree',
  };

  //Sets the default properties for all the Nodes
  public nodeDefaults(node: NodeModel): NodeModel {
    node.width = 70; node.height = 70;
    node.annotations = [{ content: node.id }];
    return node;
  };

  //Sets the default properties for all the connectors
  public connectorDefaults(connector: ConnectorModel): ConnectorModel {
    connector.type = 'Orthogonal';
    return connector;
  };
   
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Complex hierarchical tree layout with DataSource

The following code example illustrates how to create a complex hierarchical tree with DataSource.

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

Diagram.Inject(DataBinding, ComplexHierarchicalTree);

@Component({
  imports: [DiagramModule],

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

export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;

  //Initializes data source
  public data: Object = {
    id: 'Name', parentId: 'ReportingPerson',
    dataSource: new DataManager([
      { "Name": "node11" },
      { "Name": "node12", "ReportingPerson": ["node114"] },
      { "Name": "node13", "ReportingPerson": ["node12"] },
      { "Name": "node14", "ReportingPerson": ["node12"] },
      { "Name": "node15", "ReportingPerson": ["node12"] },
      { "Name": "node16", "ReportingPerson": [] },
      { "Name": "node17", "ReportingPerson": ["node13", "node14", "node15"] },
      { "Name": "node18", "ReportingPerson": [] },
      { "Name": "node19", "ReportingPerson": ["node16", "node17", "node18"] },
      { "Name": "node110", "ReportingPerson": ["node16", "node17", "node18"] },
      { "Name": "node111", "ReportingPerson": ["node16", "node17", "node18", "node116"] },
      { "Name": "node21" },
      { "Name": "node22", "ReportingPerson": ["node114"] },
      { "Name": "node23", "ReportingPerson": ["node22"] },
      { "Name": "node24", "ReportingPerson": ["node22"] },
      { "Name": "node25", "ReportingPerson": ["node22"] },
      { "Name": "node26", "ReportingPerson": [] },
      { "Name": "node27", "ReportingPerson": ["node23", "node24", "node25"] },
      { "Name": "node28", "ReportingPerson": [] },
      { "Name": "node29", "ReportingPerson": ["node26", "node27", "node28", "node116"] },
      { "Name": "node210", "ReportingPerson": ["node26", "node27", "node28"] },
      { "Name": "node211", "ReportingPerson": ["node26", "node27", "node28"] },
      { "Name": "node31" },
      { "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"] },
      { "Name": "node116", "ReportingPerson": ["node12", "node22"], }
    ],)
  };

  //Sets the default properties for all the Nodes
  public nodeDefaults(node: NodeModel): NodeModel {
    node.width = 70; node.height = 70;
    return node;
  };

  //Sets the default properties for all the connectors
  public connectorDefaults(connector: ConnectorModel): ConnectorModel {
    connector.type = 'Orthogonal';
    return connector;
  };
 
  //Uses layout to auto-arrange nodes on the Diagram page
  public layout: LayoutModel = {
    //Sets layout type
    type: 'ComplexHierarchicalTree',
  };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Complex hierarchical tree layout

NOTE

In Diagram Layouts, all root nodes will always render at the same level. This default behavior cannot be changed to render different trees at distinct levels.

Line Distribution

Line distribution is used to arrange the connectors without overlapping in automatic layout. In some cases, the automatic layout connectors connecting to the nodes will be overlapped with one another. So user can decide whether the segment of each connector from a single parent node should be same point or different point. The connectionPointOrigin property of layout is used to enable or disable the line distribution in layout. By default ConnectionPointOrigin will be SamePoint.

The following code example illustrates how to create a complex hierarchical tree with line distribution.

app.component.ts
main.ts
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { NodeModel, ConnectorModel, Diagram, DataBinding, ComplexHierarchicalTree, LayoutModel, LineDistribution,
  ConnectionPointOrigin, DiagramModule, HierarchicalTreeService, DataBindingService, DiagramComponent } from '@syncfusion/ej2-angular-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';

Diagram.Inject(DataBinding, ComplexHierarchicalTree, LineDistribution);


@Component({
  imports: [DiagramModule],

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

export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;

  //Initializes data source
  public data: Object[] = [
    { "Name": "node11" },
    { "Name": "node12", "ReportingPerson": ["node114"] },
    { "Name": "node13", "ReportingPerson": ["node12"] },
    { "Name": "node14", "ReportingPerson": ["node12"] },
    { "Name": "node15", "ReportingPerson": ["node12"] },
    { "Name": "node116", "ReportingPerson": ["node22", "node12"] },
    { "Name": "node16", "ReportingPerson": [] },
    { "Name": "node18", "ReportingPerson": [] },
    { "Name": "node21" },
    { "Name": "node22", "ReportingPerson": ["node114"] },
    { "Name": "node23", "ReportingPerson": ["node22"] },
    { "Name": "node24", "ReportingPerson": ["node22"] },
    { "Name": "node25", "ReportingPerson": ["node22"] },
    { "Name": "node26", "ReportingPerson": [] },
    { "Name": "node28", "ReportingPerson": [] },
    { "Name": "node31" },
    { "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"] }
  ];

  //Configures data source for diagram
  public source: Object = {
    id: 'Name', parentId: 'ReportingPerson',
    dataSource: new DataManager(this.data as JSON[], new Query().take(7))
  };

  //Sets the default properties for all the Nodes
  public nodeDefaults(node: NodeModel): NodeModel {
    node.width = 40; node.height = 40;
    return node;
  };

  //Sets the default properties for all the connectors
  public connectorDefaults(connector: ConnectorModel): ConnectorModel {
    connector.type = 'Orthogonal';
    connector.cornerRadius = 7;
    return connector;
  };

  //Uses layout to auto-arrange nodes on the Diagram page
  public layout: LayoutModel = {
    //Sets layout type
    type: 'ComplexHierarchicalTree',
    connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
  };

}
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 line distribution in diagram layout, you need to inject LineDistribution module in the diagram.

Different point

Linear Arrangement

Linear arrangement is used to linearly arrange the child nodes in layout, which means the parent node is placed in the center corresponding to its children. When line distribution is enabled, linear arrangement is also activated by default. The arrangement property of layout is used to enable or disable the linear arrangement in layout. By default arrangement will be Nonlinear.

NOTE

If you want to use linear arrangement in diagram layout, you need to inject LineDistribution module in the diagram. Linear arrangement is applicable only for complex hierarchical tree layout.

The following code illustrates how to allow a linear arrangement in diagram layout.

app.component.ts
main.ts
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, DiagramModule, HierarchicalTreeService, DataBindingService, NodeModel, ConnectorModel,
  Diagram, DataBinding, ComplexHierarchicalTree, LayoutModel, LineDistribution, ChildArrangement
} from '@syncfusion/ej2-angular-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';

Diagram.Inject(DataBinding, ComplexHierarchicalTree, LineDistribution);


@Component({
  imports: [DiagramModule],

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

export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;

  //Initializes data source
  public data: Object[] = [
    { "Name": "node11" },
    { "Name": "node12", "ReportingPerson": ["node114"] },
    { "Name": "node13", "ReportingPerson": ["node12"] },
    { "Name": "node14", "ReportingPerson": ["node12"] },
    { "Name": "node15", "ReportingPerson": ["node12"] },
    { "Name": "node116", "ReportingPerson": ["node22", "node12"] },
    { "Name": "node16", "ReportingPerson": [] },
    { "Name": "node18", "ReportingPerson": [] },
    { "Name": "node21" },
    { "Name": "node22", "ReportingPerson": ["node114"] },
    { "Name": "node23", "ReportingPerson": ["node22"] },
    { "Name": "node24", "ReportingPerson": ["node22"] },
    { "Name": "node25", "ReportingPerson": ["node22"] },
    { "Name": "node26", "ReportingPerson": [] },
    { "Name": "node28", "ReportingPerson": [] },
    { "Name": "node31" },
    { "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"] }
  ];

  //Configures data source for diagram
  public source: Object = {
    id: 'Name', parentId: 'ReportingPerson',
    dataSource: new DataManager(this.data as JSON[], new Query().take(7))
  };

  //Sets the default properties for all the Nodes
  public nodeDefaults(node: NodeModel): NodeModel {
    node.width = 40; node.height = 40;
    return node;
  };

  //Sets the default properties for all the connectors
  public connectorDefaults(connector: ConnectorModel): ConnectorModel {
    connector.type = 'Orthogonal';
    connector.cornerRadius = 7;
    return connector;
  };

  //Uses layout to auto-arrange nodes on the Diagram page
  public layout: LayoutModel = {
    //Sets layout type
    type: 'ComplexHierarchicalTree',
    arrangement: ChildArrangement.Linear
  };

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable routing for layout

In some complex parent-child relationships, connectors may overlap nodes in the layout. To address this issue, you can utilize the enableRouting functionality. This feature finds a connector path that avoids any obstacles.

To enable routing in the layout, set the enableRouting property to true.

The following example shows how to activate enableRouting in the layout:

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

Diagram.Inject(DataBinding, ComplexHierarchicalTree, LineDistribution );


@Component({
  imports: [ DiagramModule ],

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

export class AppComponent {
  @ViewChild('diagram')
  public diagram?: DiagramComponent;

  //Initializes data source
  public data: Object[] =[
      { Name: 'node11' },
      { Name: 'node12', ReportingPerson: ['node114'] },
      { Name: 'node13', ReportingPerson: ['node12'] },
      { Name: 'node14', ReportingPerson: ['node12'] },
      { Name: 'node15', ReportingPerson: ['node12'] },
      { Name: 'node16', ReportingPerson: ['node12'] },
      { Name: 'node116', ReportingPerson: ['node22', 'node12', 'node114'] },
      { Name: 'node21' },
      { Name: 'node22', ReportingPerson: ['node114'] },
      { Name: 'node222', ReportingPerson: ['node114'] },
      { Name: 'node2222', ReportingPerson: ['node114'] },
      { Name: 'node23', ReportingPerson: ['node22'] },
      { Name: 'node31' },
      { Name: 'node114', ReportingPerson: ['node11', 'node21', 'node31'] },
    ];

  //Configures data source for diagram
  public source: Object = {
    id: 'Name', parentId: 'ReportingPerson',
    dataSource: new DataManager(this.data as JSON[], new Query().take(7))
  };


    //Sets the default properties for all the Nodes
    public nodeDefaults(node: NodeModel): NodeModel {
      node.width = 40; node.height = 40;
      return node;
    };
  
    //Sets the default properties for all the connectors
    public connectorDefaults(connector: ConnectorModel): ConnectorModel {
      connector.type = 'Orthogonal';
      connector.cornerRadius = 7;
      return connector;
    };
  
    //Uses layout to auto-arrange nodes on the Diagram page
    public layout: LayoutModel = {
      //Sets layout type
      type: 'ComplexHierarchicalTree',
      enableRouting: true
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));