Example of Radial Tree in Angular Diagram Component

This sample demonstrates a huge organizational structure using a compact layout model. Radial tree layout algorithm is used to build such a layout.

Maria AndersAna TrujilloAntoMorenoMartínKlossPeterFrankenAlexFeuerNancyGeorgPippsElizabethRoelAnneSergioroelHorstKlossJoseMichaelMarioPontesAria CruzDiegoRoelCarlosSchmittYoshiWilsonIsabelCastroPaoloAccortiPaulaWilsonJohnSteelEduardoRoelJoséPedro JeanFresnièreHelenMarieManuPereiraAnnetteRoelSimonRoelCatherineKaffLino RodriHowardSnydNardoBatistaRitaPfalzheimAndréFonsecaMichaelHolzDanielToniniPhilipCramerLiz NixonLiu WongLúciaCarvalhoHannaMoosKarinJosephsPaulHenriotPedroAfonsoMattiKennaPirkkoKingPeterCiteauxElizabethMaryLauraCallahanKarlJablonskiVictoriaAshHelvetisNagyJonasBergsenMiguelAngelFelipeKlossSimonRoelZbyszekYangJanineLabruneRitaMüllerRolandMendelJyttePetersenNardoBatistaJaneteLimeiraRenateJoseAlejCaminoHelenBennettCarlosNagyCarineSchmittMichaelHolzThomasHardyChristinakaffJaimeYorresLúciaCarvalhoMarySaveleyKlossPerrierAlejCaminoPalleIbsenJaneteLimeiraPaulaParenteRenePhillipsMauriMoroniRobert King
Description

This example shows how to visualize a complex hierarchical data using radial tree layout algorithm that arranges the nodes in a circular structure. The type property of the layout can be used to enable radial tree layout. The spacing between the objects can also be customized in the tree. The horizontalSpacing and verticalSpacing properties of layout can be used to customize the space between the objects in a tree.

Injecting Module

The diagram component’s features are segregated into individual feature-wise modules. To generate diagrams from an external data source, inject DataBinding module into @NgModule.providers section. To automatically arrange the objects in a radial structure, inject RadialTree module into @NgModule.providers section.