Constraints in Graph Drawing 1 Jasmin Smula Kathy Ryall, Joe Marks, Stuart Shieber: Using constraints to achieve stability in automatic graph layout algorithms

Constraints inGraph Drawing 1

Jasmin Smula

Kathy Ryall, Joe Marks, Stuart Shieber:Using constraints to achieve stability in automatic graph layout algorithms

Karl-Friedrich Böhringer, Frances Newbery Paulisch:An interactive constraint-based system for drawing graphs

Constraints in GD 1 2

Inhalt

• Constraints

• Nutzung von Constraints, um stabile Graphen zu erhalten

• Editor zum automatischen Zeichnen von Graphen


Constraints

• vom Benutzer formulierte oder vom Algorithmus automatisch generierte Nebenbedingungen

• Aufgaben:– Korrektheit garantieren– Aussagekraft erhöhen


Problemstellung

Zwei Nachteile bei Berechnung automatischer Layouts von Graphen:

1. Ohne Eingreifen des Benutzers kann der Algorithmus nur syntaktisch korrekte Graphen erstellen

2. Nach einer Änderung des Graphen berechnet der Algorithmus ein komplett neues Layout, ohne das alte zu berücksichtigen

Benutzer verliert schnell die Orientierung


Problemstellung


Problemstellung


Problemstellung

• Ansatz: Probleme durch Einsatz von Constraints lösen

• Methode, wie Benutzer-spezifizierte Constraints zu automatischen Graphen-Layout-Algorithmen hinzugefügt werden können

• Constraints, die durch das aktuelle Layout gegeben sind, bei der Berechnung des neuen Layouts berücksichtigen


Stabilität: Definitionen

• stabiler Graph:

Graph, dessen Layout sich nicht stark ändert, wenn es neu berechnet wird

• strukturelle Stabilität:

Layout erfüllt die vom Benutzer angegebenen Constraints

• dynamische Stabilität:

Unterschied zwischen aufeinander folgenden Layouts des Graphen minimal


Aufgabe

• Gewünscht:

kleine Strukturänderung kleine Layout-Änderungen (Orientierung bewahren)

• Voraussetzung: Algorithmus zur Berechnung automatischer Graphenlayouts vorhanden

• Mechanismus, um Algorithmus so zu ergänzen, dass er Constraints berücksichtigt


Systemarchitektur

Anwendung

Graphenlayout-Algorithmus

3D-Constraint-Manager

Constraint Manager

Constraint Manager

Constraint Manager

Eindimensionale Constraints



x-Koordinate y-Koordinate z-Koordinate


Systemarchitektur

1. Constraints für einzelne Dimensionen– Absolute oder relative Positionierung, Clusters– Formulierung von Constraints: Verwendung

ihrer Positionen im 2- oder 3-dimensionalen Koordinatensystem

2. Constraint-Manager für einzelne Dimensionen– Liste aller Constraints verwalten– Bewertung der Menge der Constraints und

diese widerspruchsfrei halten


Systemarchitektur

3. 3D-Constraint-Manager– Schnittstellenmodul– kombiniert die Constraints verschiedener

Dimensionen– Übersetzung von drei- in eindimensionale

Constraints– Interface zum Graphenlayout-Algorithmus

4. Graphenlayout-Algorithmus

5. Anwendung


Sugiyamas Algorithmus

1. Topologische Sortierung:

Knoten in Ebenen einteilen

2. Unterteilung von langen Kanten:

Kanten, die mehr als eine Ebene überbrücken, werden durch mehrere kurze Kanten ersetzt

3. Barizentrische Anordnung:

Kantenkreuzungen zwischen benachbarten Ebenen minimieren

4. Feineinstellung:

Bestimmen der absoluten Positionen v. Knoten


Sugiyamas Algorithmus

Ausgangsgraph Ebeneneinteilung Kanten kürzen

Kreuzungen minimieren Feineinstellung


Integrieren der Constraints für strukturelle Stabilität

• Phase 1:– für jede Kante: Startknoten über Zielknoten– für Kanten innerhalb einer Ebene: Start- und

Endknoten solcher Kanten direkte Nachbarn

• Phase 2:– zwei Knoten auf derselben vertikalen Linie:

alle Zwischenknoten dieselbe x-Koordinate


Integrieren der Constraints für strukturelle Stabilität

• Phase 3:– aus barizentrischer Anordnung resultierende

Constraints

• Phase 4:– relative Ordnung festgelegt x-Koordinaten

der Knoten bestimmen– Knotenpositionen in vorigen Ebenen

berücksichtigen


Integrieren der Constraints für dynamische Stabilität

• nach jedem automatischen Layout: Einfügen zusätzlicher Constraints

• Nutzeränderung Constraints in näherer Umgebung der Änderungen abschwächen

• Graph wird in veränderten Bereichen flexibel• nähere Umgebung: Knoten, die von der

Änderung direkt betroffen sind, und Knoten, die eine bestimmte maximale Distanz zu diesen Knoten haben


Integrieren der Constraints für dynamische Stabilität

• Zusätzliche Constraints:– Ebene jedes Knotens = Ebene im aktuellen

Layout – Reihenfolge der Knoten innerhalb einer

Ebene = aktuelle Reihenfolge• Nach Nutzeränderung werden flexible Knoten

von diesen Constraints befreit• Benötigte Zeit = Zeit zur Berechnung eines

komplett neuen Layouts


GLIDE

• „Graph Layout Interactive Diagram Editor“• Benutzer: ungefähres Layout der Knoten• Computer: setzt Anforderungen in eine Menge

von Constraints um• Constraints: Terme in einem physikalischen

Modell• Berechnung der Positionen der graphischen

Objekte durch physikalische Simulation


GLIDE-Interface


Funktionsweise von GLIDE

• Für jeden Constraint mehrere virtuelle Federn zwischen Knoten bzw. Kanten

• virtuelle Kräfte, die auf die Knoten wirken, beeinflussen deren Position im Graphen

• Energieminimierung durch physikalische Simulation

• Simulation wird animiert


Hooksches Gesetz

• Federn folgen dem Hookschen Gesetz• Hooksches Gesetz:

Kraft einer Feder ist proportional zu ihrer Auslenkung:

F = D · s

F = auf die Feder wirkende Kraft

D = Federkonstante

s = Weg, um den die Feder gedehnt wird


Eigenschaften von Federn

• Federkonstante:

korreliert die Auslenkung einer linearen Feder mit der daraus resultierenden Zug- oder Druckkraft

• Restlänge:

Länge, ab der sich die Feder nicht mehr zusammenzieht, wenn sie gedehnt wird, bzw. nicht mehr auseinanderdrückt, wenn sie gestaucht wird


Constraints

• Syntaktische Constraints:– garantieren Wohlgeformtheit des Graphen– zusätzliche Kräfte werden von GLIDE

automatisch eingefügt

• Semantische Constraints (VOFs):– dienen der Überschaubarkeit und

Aussagekraft des Graphen


Constraints

Syntaktische:

• Node-node-overlap

• Node-edge-overlap


Constraints

Semantische:

• Alignment • Even Spacing

• Sequence • Cluster


Constraints

Semantische:

• T-Shape • Symmetry

• Zone • Hub-Shape


Realisierung syntaktischer Constraints

Node-node overlap:• Knoten sollen sich nicht überschneiden:

Zwischen jedem Knotenpaar Feder einfügen• Restlänge = minimale Distanz zwischen den

Knoten• Federkonstante = 0, wenn die Feder gedehnt

wird

Feder übt nur dann Kraft aus, wenn sich die beiden Knoten überlappen


Realisierung semantischer Constraints

Alignment:• Knotenmenge soll auf einer Parallelen zur x-

oder y-Achse liegen• es wird eine Gerade berechnet, die parallel zur

gewählten Achse verläuft und durch den Schwerpunkt der Knoten führt

• dann wird eine Feder mit Restlänge 0 zwischen jedem Knoten und dieser Geraden angebracht.


Realisierung semantischer Constraints

Sequence:• Knoten sollen in einer bestimmten Reihenfolge

entlang einer Achse angeordnet werden• Federn mit variabler Federkonstante (!) werden

zwischen benachbarten Knoten angebracht• Federkonstante gleich Null, wenn Knoten in

richtiger Reihenfolge, sonst positiv


Sonstiges

• andere VOFs:– Anchor:

Um einen Knoten an einer Stelle festzuhalten– Frame (kein wirklicher Constraint):

Menge von Knoten wird umrahmt

• Phantomknoten

• geknickte Kanten


Algorithmus zur Berechnung der Position und des Impulses aller Knoten

solange kinetische Energie über Kmin:

• Setze t = t + Δt

• für alle Knoten ni berechne Fi

• Dämpfungskonstante γ berechnen

• für alle ni:

– pi(t) aus pi(t - Δt), Fi und γ berechnen

– falls ni verankert: xi(t) = xi(t - Δt),

sonst xi(t) aus xi(t - Δt) und pi(t) berechnen

• wenn nötig, Bildschirm updaten


Ergebnis

• Die physikalische Simulation ist intuitiv und vorhersehbar

• GLIDE ist nicht dafür gedacht, global optimale Lösungen zu finden

• Computer ist verantwortlich für lokale Optimierung, der Benutzer für globale Kontrolle


Zusammenfassung

• vom Benutzer eingegebene Constraints wichtig für Aussagekraft von Graphen

• Mechanismus zum Einbetten von Constraints in einen Algorithmus zur Berechnung von Layouts

• zum Erreichen von Stabilität altes Layout bei Berechnung des neuen Layouts einbeziehen

• GLIDE, Editor zum automatischen Zeichnen von Graphen: virtuelle Federn für Realisierung von Constraints


…noch Fragen?

Documents

Constraints in Graph Drawing 1 Jasmin Smula Kathy Ryall, Joe Marks, Stuart Shieber: Using constraints to achieve stability in automatic graph layout algorithms