Organigramm (Organizational chart) mittels D3.js realisieren

Share This Post

Nachdem ich länger nach einer vernünftigen Lösung für ein Organigramm mittels D3.js gesucht habe und nicht wirklich fündig geworden bin, beschloss ich es selbst zu entwickeln und das Ergebnis mit euch zu teilen. Es ist aber natürlich noch stark ausbaufähig.

Das Organigramm unterstützt zwei Modi:

  • Modern: Geschwungene Linien zwischen den Elementen (Realisiert mit der Diagonal-Funktion der D3-Library)
  • Klassisch: Eckige Linien zwischen den Elementen

Darüber hinaus bietet das Organigramm die Möglichkeit Elemente dynamisch zu laden. D.h. die gesamten (JSON-)Daten für das Organigramm müssen nicht direkt beim Laden der Seite geladen werden, sondern werden erst geladen, sobald ein Kästchen aufgeklappt wird. Außerdem kann mittels des Mausrades hinein- bzw. hinausgezoomt werden. Mittels Klick und ziehen mit der Maus, kann das Organigramm verschoben werden.

Hier könnt ihr euch die Live-Demo ansehen: Organigramm Live Demo

So sieht das Organigramm im „Modernen“-Modus aus:

So sieht das Organigramm im „Klassischen“-Modus aus:

 

Update 22. Mai 2016

Es gibt nun auch ein GitHub-Projekt hierzu. Hier können Probleme gemeldet und mittels Pull-Requests auch gleich behoben werden:
https://github.com/BernhardZuba/d3js-orgchart

Was Sie auch interessieren könnte:

Sie wollen Schwung in Ihre Digitalisierung bringen?

Schreiben Sie uns und wir bleiben in Kontakt

Lass uns ins Gespräch kommen