Layout-Varianten zum Vergleich

5 Layout-Engines für die Mindmap. Wähle visuell aus, welche am besten passt.

Mock-Tree mit Steuerlupe als Stamm + Naming-Wurzeln links + 5 Subtrees rechts.

Fertig
In Arbeit
Baustelle
Unbearbeitet
Pan: Drag · Zoom: Scroll/Pinch · Reset: Button rechts oben
Variante 1

Bilateral

d3.tree() horizontal — Naming-Wurzeln nach links gespiegelt, alles andere rechts. Steuerlupe in der Mitte.

Pro

  • Klare „Wurzel/Stamm/Äste"-Metapher
  • Vorhersehbar, Knoten-Reihenfolge stabil
  • Lesefluss links→rechts vertraut

Contra

  • Asymmetrie bei vielen Wurzeln
  • Vertikaler Platz wird knapp
  • Unflexibel bei Re-Balancing
Stimmen: 0
Variante 2

Quadrant-Spann

Steuerlupe in der Mitte, 4 Quadranten (N/O/S/W). Direkt-Kids round-robin verteilt; jeder Subtree wächst in seine Richtung.

Pro

  • Maximale Flächennutzung
  • Skalierbar bei vielen Kategorien
  • Symmetrische Optik

Contra

  • Round-Robin wirkt willkürlich
  • Diagonale Leserichtung ungewohnt
  • Nord/Süd-Subtrees stehen kopfüber zur Lesebewegung
Stimmen: 0
Variante 3

Radial 360°

Steuerlupe in der Mitte, Direkt-Kids gleichmäßig um 360° verteilt. Jeder Sub-Subtree wächst radial nach außen.

Pro

  • Gleichberechtigte Hauptkategorien
  • Sehr skalierbar (n Kategorien = 360/n)
  • Visuell stark, „Sonne mit Strahlen"

Contra

  • Labels rotieren ungewohnt mit
  • Keine natürliche Lesereihenfolge
  • Naming-Wurzeln verlieren ihre „links"-Semantik
Stimmen: 0
Variante 4

Force-directed

d3.forceSimulation mit charge + link + center. Knoten finden organisch ihre Position. Soft-Drag durch User möglich.

Pro

  • Organische Optik, fühlt sich „lebendig" an
  • Verbindungen sichtbar als Spannung
  • User kann Knoten frei bewegen

Contra

  • Layout instabil, jeder Reload anders
  • Initial-Render flackert (~1s)
  • Keine klare Hierarchie auf den ersten Blick
Stimmen: 0
Variante 5

Bilateral hierarchisch

Wie Variante 1, aber zusätzlich vertikal gestaffelt — Wurzeln gehen schräg nach links-oben, Äste schräg nach rechts-unten. „Stamm/Wurzel/Äste"-Bild.

Pro

  • Klarste Baum-Metapher (oben Wurzel, unten Äste)
  • Naming als „Vorgeschichte" optisch lesbar
  • Diagonale entspannt das Layout

Contra

  • Mehr vertikaler Platzbedarf
  • Schräglagen erschweren Label-Lesen
  • Bei vielen Wurzeln wird oben-links eng
Stimmen: 0