Studienarbeit GXL2SVG - Visualierung von Graphen in SVG

Transkript

1 Universität Koblenz-Landau Institut für Softwaretechnik Prof. Dr. Jürgen Ebert Studienarbeit GXL2SVG - Visualierung von Graphen in SVG 14. Dezember 2005 Florian Schricker

2 INHALTSVERZEICHNIS 1 Inhaltsverzeichnis 1 Einführung 4 2 GXL Einführung TGraphen GReQL Fazit Scalable Vector Graphics Grundlagen Einheiten Einfache Formen Pfade Text Gruppen von Grafikobjekten Cascading Style Sheets Einführung Verwendung eines externen Stylesheets Globale CSS-Definition innerhalb der SVG-Grafik style-attribut am Grafikobjekt Anwendungsreihenfolge Gruppen und CSS Elementtyp-bezogene Styling-Attribute Klassenbezogene Styling-Attribute Instanzbezogene Styling-Attribute Fazit Layoutverfahren Grundlagen Layoutverfahren der GraphViz-Bibliothek Fazit Die Layoutspezifikation Rahmenbedingungen

3 INHALTSVERZEICHNIS Einheitensystem Koordinatensystem Grundlagen der Knotendarstellung Grundlagen der Kantendarstellung Layoutangaben Architektur Designziele UML-Klassendiagramm Layoutspezifikation als GSI-Repository Überblick über GSI Realisierung der Layoutspezifikation als GSI-Repository Name-Ausdruck-Paare des Repositories Allgemeine Layoutangaben Signatur des Informationssegments Layoutverfahren Größe der Gesamtgrafik Hintergrundfarbe Navigationsrahmen Farben Definition von Farben Definition einer Farbtabelle Zugriff auf eine Farbtabelle Definition eines Farbverlaufs Auswahl aus einem Farbverlauf Layoutangaben für Graphelemente Ebenen Beispiele Layoutangaben für die Knotendarstellung: Signatur des Informationssegments Darstellungsstil Label Hintergrundfarbe Schrift

4 INHALTSVERZEICHNIS Umrandung Größe Layoutangaben der Kantendarstellung Signatur des Informationssegments Darstellungsstil Label Label-Schrift Terminal-Label Terminal-Label-Schrift Hintergrundfarbe Kantensymbol Kantenzug Anwendungsbeispiel 54 9 Fazit Zusammenfassung des Entwicklungsverlaufs Schlussbemerkung A Standard-Farbtabelle 59 B Zugriffsinformation der Layoutspezifikaten 60 C CD-Inhalt 62

5 1 Einführung 4 1 Einführung In dieser Arbeit wird ein Werkzeug zur Graphvisualisierung vorgestellt. Graphen, eine mathematische Struktur bestehend aus Knoten, verbunden durch Kanten (vgl. Abb.), bestehen in heutigen Anwendung meist aus vielen solchen Graphelementen. Realistisch sind mehrere Tausend Knoten und mehr Kanten. Als Eingabeformat für das Werkzeug bietet sich das Graph-Austauschformat GXL (Graph exchange Language) an. GXL ist ein anerkannter XML-Standard und erlaubt dem Werkzeug das Einlesen und die Visualisierung von Graphen aus unterschiedlichsten Bereichen. Um Graphen darzustellen, werden Layoutverfahren benötigt, um die Position von Knoten zu bestimmen und um die Kantenverläufe zwischen den Knoten zu berechnen. Dieses Werkzeug nutzt für das Layouting von Graphen die GraphViz Bibliothek. Unter Layouting versteht man das Anwenden eines Layoutverfahrens, welches Knotenposition und Kantenverläufe berechnet. GraphViz implementiert dazu drei Layoutverfahren, welche Graphen hierarchisch, symmetrisch oder radial darstellen. Aufgrund der CPL- Lizenz kann GraphViz in das Werkzeug integriert und die bereitgestellten Verfahren genutzt werden. Zusätzlich ist das Werkzeug so ausgelegt, dass weitere Implementationen von Layoutverfahren hinzugefügt werden können, sollten diese zu einem späteren Zeitpunkt zur Verfügung stehen. Bei der Visualisierung von Graphen stoßen aktuelle Lösungen schnell an ihre Grenzen; insbesondere bei Pixel-basierten Ausgabeformaten (Rastergrafiken) werden die Darstellungen von Graphen schnell sehr groß und unübersichtlich oder auf zu wenig Raum werden Graphdarstellungen völlig unkenntlich. Durch den Einsatz von Scalable Vector Graphics (SVG) bei diesem Werkzeug sollen Darstellungsprobleme dieser Art vermieden werden. SVG ist eine Sprache in XML zur Beschreibung von zwei-dimensionalen Grafiken, die sich aus grafischen Primitiven zusammensetzen. Als Primitive stehen Kreise, Rechtecke, Ellipsen und Linienzüge zur Verfügung, die zusammengesetzt die fertige SVG-Grafik ergeben. Obwohl GraphViz selbst bereits SVG unterstützt, sind, durch den Einsatz einer Layoutspezifikation, weitaus flexiblere Visualisierungen möglich. Dies geschieht durch Einbeziehung des gegebenen Graphen: über eine Anfragesprache können Grapheigenschaften in die Layoutspezifikation fließen, welche die Darstellung beeinflussen. Ziel ist also ein Werkzeug, das über eine Layoutspezifikation, welche die Darstellungseigenschaften beschreibt, einen gegebenen GXL-Graphen mit SVG visualisiert. Die Layoutspezifikation bietet dabei eine möglichst flexible, unabhängige Beschreibung der Darstellung mit der Möglichkeit, den jeweils darzustellenden Graphen mit einzubeziehen.

6 2 GXL 5 2 GXL Das in dieser Arbeit vorgestellte Werkzeug zur Graphvisualisierung nutzt das XMLbasierte Austauschformat GXL (Graph exchange Language) als Eingabeformat für Graphen. 2.1 Einführung Entwickelt wurde GXL in Kollaboration verschiedener Universitäten, um einen XMLbasierten Standard für den Austausch von Daten zwischen verschiedenen Tools zu schaffen ([GXL01]). Daran beteiligt sind: University of Waterloo University of California Darmstadt University of Technology University of Koblenz-Landau Daten werden bei GXL generell durch Graphen repräsentiert. Bei einem Graphen handelt es um einen abstrakten Datentyp, bestehend aus Knoten und Kanten, die Beziehungen (Verbindungen) zwischen den Knoten herstellen. 2.2 TGraphen Als Eingabe unterstützt werden in diesem Werkzeug Graphen der TGraph-Submenge von GXL; TGraphen sind angeordnete, gerichtete, typisierte und attributierte Graphen (vgl. Abb. 1). Das heisst: TGraphen bestehen aus einer geordneten, endlichen Folge von Knoten V und Kanten E. Alle Kanten haben einen, nicht notwendigerweise verschiedenen Start- und Zielknoten. Jedem Graphelement (Knoten oder Kante) ist ein Typ einer gegebenen Typmenge zugewiesen. Graphelemente, bzw. deren Typen, können Attribute (Name-Wert-Paare) enthalten. Neben TGraphen erlaubt GXL auch Hypergraphen und hierarchische Graphen. Diese werden in dieser Arbeit aber nicht unterstützt.

7 2.2 TGraphen 6 v1 : Function e1 : iscaller line = 8 name = "main" e2 : iscaller line = 19 v2 : FunctionCall v3 : FunctionCall e3 : iscallee {1} {2} e6 : isinput {2} e7 : isinput {1} e4 : iscallee v4 : Function name = "max" e5: isinput e8 : isinput v5 : Function name = "min" e9 : isoutput e10 : isoutput v6 : Variable v7 : Variable name = "a" name = "b" Abbildung 1: ein TGraph (Quelle: Der in Abbildung 1 gezeigt TGraph im GXL-Format 1 : <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE gxl SYSTEM " <gxl xmlns:xlink=" <graph 5 id="complexexample-instance" edgeids=" true" edgemode=" directed" hypergraph=" false"> <type xlink:href="[...]#complexexampleschema" xlink:type=" simple"/> <node id="v1"> <type xlink:href="[...]#function" xlink:type=" simple"/> 10 <attr name=" name"><string> main</string></attr></node> <node id="v2"> <type xlink:href="[...]#functioncall" xlink:type=" simple"/></node> <node id="v3"> <type xlink:href="[...]#functioncall" xlink:type=" simple"/></node> 15 <node id="v4"> <type xlink:href="[...]#function" xlink:type=" simple"/> <attr name=" name"><string> max</string></attr></node> <node id="v5"> <type xlink:href="[...]#function" xlink:type=" simple"/> 20 <attr name=" name"><string> min</string></attr></node <node id="v6"> <type xlink:href="[...]#variable" xlink:type=" simple"/> <attr name=" name"><string> a</string></attr></node> <node id="v7"> 25 <type xlink:href="[...]#variable" xlink:type=" simple"/> <attr name=" name"><string> b</string></attr></node> <edge id="e1" to="v2" from="v1"> <type xlink:href="[...]#iscaller" xlink:type=" simple"/> <attr name=" line"><int> 8</int></attr></edge> 30 <edge id="e2" to="v3" from="v1"> <type xlink:href="[...]#iscaller" xlink:type=" simple"/> <attr name=" line"><int> 19</int></attr></edge> <edge id="e3" to="v2" from="v4"> <type xlink:href="[...]#iscallee" xlink:type=" simple"/></edge> 35 <edge id="e4" to="v3" from="v5"> <type xlink:href="[...]#iscallee" xlink:type=" simple"/></edge> <edge id="e5" to="v2" from="v6" toorder=" 1"> <type xlink:href="[...]#isinput" xlink:type=" simple"/></edge> <edge id="e6" to="v2" from="v7" toorder=" 2"> 1 lange URLs in href -Attributen gekürzt; ersetze "[...]" mit " complexexampleschema.gxl"

8 2.3 GReQL 7 40 <type xlink:href="[...]#isinput" xlink:type=" simple"/></edge> <edge id="e7" to="v3" from="v6" toorder=" 2"> <type xlink:href="[...]#isinput" xlink:type=" simple"/></edge> <edge id="e8" to="v3" from="v7" toorder=" 1"> <type xlink:href="[...]#isinput" xlink:type=" simple"/></edge> 45 <edge id="e9" to="v2" from="v6"> <type xlink:href="[...]#isoutput" xlink:type=" simple"/></edge> <edge id="e10" to="v3" from="v7"> <type xlink:href="[...]#isoutput" xlink:type=" simple"/></edge> </graph> 50 </gxl> 2.3 GReQL Die Einschränkung auf TGraphen im Rahmen dieser Arbeit ermöglicht die Verwendung von GReQL (Graph Repository Query Language) [GREQL01] zur Berechnung unterschiedlichster Metriken und anderer Eigenschaften eines gegebenen Graphen, um diese zum Beispiel bei der Darstellung zu verwenden. Ein gegebener GXL-Graph muss sich demnach in einen TGraphen konvertieren lassen, um mit dem Werkzeug dieser Arbeit visualisiert zu werden. Für weitere Beispiele und Informationen sei auf [GXL01, GXL02, GXL03] verwiesen. 2.4 Fazit GXL ermöglicht es dem in dieser Arbeit vorgestellten Werkzeug, Graphen aus unterschiedlichsten Bereichen der Softwaretechnik einzulesen, um diese zu visualisieren.

9 3 Scalable Vector Graphics 8 3 Scalable Vector Graphics Dieses Kapitel gibt eine Einführung in Scalable Vector Graphics (SVG), eine Sprache zur Beschreibung von zwei-dimensionalen Vektor- und gemischten Vektor- / Rastergrafiken in XML [SVG01]. SVG ist eine W3C Recommendation mit starkem Rückhalt aus der Industrie; es haben u.a. Adobe, SUN Microsystems und IBM an der SVG- Spezifikation mitgearbeitet. Basierend auf [SVG01] gibt dieses Kapitel in den folgenden Abschnitten genau den Überblick über SVG, der den für diese Arbeit notwendigen Teil von SVG abdeckt. Diese Einführung bezieht sich außerdem ausschließlich auf die SVG-Beschreibung in der Version 1.1. Einen Vorgeschmack auf die Möglichkeiten zeigt Abbildung 2. Abbildung 2: Powered by GXL 3.1 Grundlagen Die Sprache SVG ermöglicht es, zwei-dimensionale Grafiken durch die Komposition von drei verschiedenen Typen von Grafikobjekten zu erstellen. Die möglichen Grafikobjekte sind: Vektorgrafiken, beschrieben durch Linien und/oder Kurven Bilder, ein mögliches Format ist beispielsweise PNG Text Grafikobjekte lassen sich desweiteren gruppieren, transformieren, mit Stilen individualisieren und es ist durch Scripting möglich, interaktive Grafiken zu erzeugen. Aufbau von SVG-Dokumenten Der Aufbau eines XML-Dokumentes, das eine SVG-Grafik beschreibt (ein SVG-Dokument), wird durch folgenden Rumpf definiert:

10 3.1 Grundlagen 9 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " 5 <svg width="300" height="100" version="1.1" xmlns=" <desc>beschreibung (optional)</desc> 10 <! SVG Grafikobjekte hier > </svg> Abbildung 3: SVG-Dokumentenstruktur Wichtig sind die Attribute width und height, sie definieren die Größe der SVG-Grafik. Koordinatensystem und Ansichten Das Koordinatensystem von SVG-Grafiken hat eine nach unten zeigende y-achse. Die Zeichenfläche (Canvas) ist in beiden Richtungen unbeschränkt; das durch die Attribute width und height aufgespannte Rechteck beschreibt die sichtbare Fläche (Viewport) und somit, wie bereits erwähnt, die Größe der SVG-Grafik. Abbildung 4 verdeutlicht diesen Zusammenhang: auf dem unendlich großen Canvas wird durch das svg-element der Viewport am Ursprung mit gegebener Höhe und Breite gesetzt. Alle Grafikobjekte, die in diesem Viewport liegen, sind Teil der resultierenden SVG-Grafik. Dargestellt ist der Viewport der in Abbildung 3 angeführten SVG-Grafik width 0 x-axis height Viewport 100 y-axis Canvas Abbildung 4: Zusammenhang Canvas / Viewport Ansichten ändern mit viewbox Das (optionale) viewbox-attribut des svg-elements ermöglicht es, den in einem Viewport darzustellenden Teil einer SVG-Grafik zu bestimmen. Durch Neu-Definition von

11 3.2 Einheiten 10 Ursprung und Größe mittels des viewbox-elements kann im gegebenen Viewport ein anderer Ausschnitt einer SVG-Grafik dargestellt werden. Es handelt sich also um eine Transformation des Koordinatensystems: das viewbox-attribut erlaubt die Translation und Skalierung des Koordinatensystems. Zusätzlich lässt sich das Skalierungs- Verhalten durch das preserveaspectratio-attribut weiter einstellen (vgl. [SVG06]). width=200 altes Koordinatensystem Viewport height=200 nicht sichtbar nicht sichtbar 400 neues Koordinatensystem Canvas Canvas viewbox Translation Skalierung Abbildung 5: Neues Koordinatensystem durch viewbox Abbildung 5 zeigt wie mittels einer Koordinatentransformation ein anderer Ausschnitt der zugrunde liegenden Grafikobjekte auf dem Canvas (hier: ein schwarz gefüllter Kreis) im Viewport dargestellt wird. Der SVG-Quelltext dazu: Unverändertes Koordinatensystem <svg version="1.1" xmlns=" width="200" height="200">... </svg> Transformiertes Koordinatensystem <svg version="1.1" xmlns=" width="200" height="200" viewbox=" " preserveaspectratio="none">... </svg> 3.2 Einheiten Alle Koordinaten- und Längenangaben einer SVG-Grafik können mit und ohne Einheiten definiert werden. Wird keine Einheit angegeben, so spricht man von User- Einheiten (s.u.); mögliche absolute Einheiten sind u.a.: em, px, pt, cm und in.

12 3.3 Einfache Formen 11 User-Einheiten Im initialen Zustand entspricht eine User-Einheit einem Pixel bzw. entspricht genau der Größe, welche das Medium, in dem die SVG-Grafik angezeigt wird, als Pixelgröße definiert. Diese Größe kann sich durch die Verwendung des viewbox-attributs oder anderer Transformationen ändern, so dass eine User-Einheit dann nicht (mehr) der Pixelgröße des Ausgabegerätes entspricht. Absolute Einheiten (px, pt, cm) werden immer abhängig von der durch das Ausgabegerät gegebenen Pixelgröße berechnet. Da sich diese aber ändern kann (nicht alle Ausgabegeräte definieren für einen Pixel dieselbe Größe) und da SVG-Grafiken per se frei skalierbar (Scalable Vector Graphics) sind, wird von der Verwendung von absoluten Einheiten abgeraten. Im Folgenden werden im Zusammenhang mit SVG immer User-Einheiten verwendet, um eine einheitliche Darstellung auf allen Ausgabegeräten sicherzustellen. User-Einheiten und das viewbox-attribut Das oben eingeführte viewbox-attribut (Translation und Skalierung des Viewports) bestimmt, wie User-Einheiten auf die Größe der SVG-Grafik abgebildet werden. Diesen Zusammenhang verdeutlicht noch einmal Abbildung 6. Größe der SVG-Grafik: 400pt x 300pt (definiert im svg-element) 400pt 5 <svg version="1.1" xmlns="..." width="400pt" height="300pt" viewbox=" "> 10 </svg> <! SVG Grafikobjekte hier > 300pt (200, 200) (600, 200) Viewport (200, 400) (600, 400) abgebildet auf User-Einheiten (800 x 600) durch das viewbox-attribut Abbildung 6: Zusammenhang viewbox / User-Einheiten 3.3 Einfache Formen SVG enthält fünf sogenannte grafische Primitive: Rechteck rect Kreis circle

13 3.3 Einfache Formen 12 Ellipse ellipse Linie line, polyline Polygon polygon Für eine detaillierte Beschreibung der einzelnen Primitive siehe [SVG02]; im Folgenden wird jeweils ein Beispiel mit Quelltext und resultierender SVG-Grafik für die grafischen Primitive präsentiert. Das rect-element 5 <svg version="1.1" xmlns="..." width="400pt" height="300pt" viewbox=" "> 10 </svg> <rect x="100" y="100" width="200" height="100" /> Position (x/y) height width Viewbox: 400 x 300 Über das x- und y-attribut wird die Position der linken, oberen Ecke des Rechtecks gesetzt; width und height bestimmen die Größe des Rechtecks. Das circle-element 5 <svg version="1.1" xmlns="..." width="400pt" height="300pt" viewbox=" "> 10 </svg> <circle cx="200" cy="150" r="100" /> Position (cx/cy) Radius (r) Viewbox: 400 x 300 Im Gegensatz zum Rechteck wird die Position eines Kreises über den Mittelpunkt gegeben (cx- / cy-attribut). Das r-attribut setzt den Radius des Kreis um den Mittelpunkt.

14 3.3 Einfache Formen 13 Das ellipse-element 5 <svg version="1.1" xmlns="..." width="400pt" height="300pt" viewbox=" "> 10 </svg> <ellipse cx="200" cy="150" rx="100" ry="50" /> Position (cx/cy) Radien (rx, ry) Viewbox: 400 x 300 Analog zu Kreisen wird auch bei Ellipsen die Position über den Mittelpunkt gesetzt. Die Größe setzt sich bei Ellipsen über zwei Radien zusammen; das rx-attribut definiert den Radius in x-richtung und das ry-attribut in y-richtung. Linien mit dem line- und polyline-element 5 <svg version="1.1" xmlns="..." width="400pt" height="300pt" viewbox=" "> <line x1="100" y1="50" x2="300" y2="50" /> Line (x1,y1) 1 (x2,y2) 4 <polyline 10 points= "100, , , ,100" style="fill:none; stroke:black;" /> </svg> 3 Polyline 2 Viewbox: 400 x 300 Das line-element zieht eine Linie vom gegebenen Startpunkt (x1- / y1-attribut) zum Zielpunkt (x2- / y2-attribut). Das polyline-element stellt Linienzüge dar. Die einzelnen Punkte des Linienzuges werden im points-attribut als Koordinatenpaare (x,y) angegeben. Das Beispiel zeigt, wie mittels des style-attributs die Darstellung weiter beeinflusst werden kann. In Kapitel 3.7 wird darauf detailliert eingegangen. Außerdem sind in der Abbildung die Punkte des Linienzuges zum besseren Verständnis hervorgehoben und durchnummeriert.

15 3.4 Pfade 14 Das polygon-element 5 10 <svg version="1.1" xmlns="..." width="400pt" height="300pt" viewbox=" "> <polygon points= "150, , , , , ,150" /> </svg> Viewbox: 400 x 300 Mit dem polygon-element werden geschlossene Polygone gezeichnet. Ähnlich dem polyline-element werden dazu die Punkte der Reihe nach im points-attribut angegeben In der resultierenden SVG-Grafik wird beim polygon-element immer eine Linie zwischen dem ersten und letzten Punkt gezogen, um die Figur zu schließen. 3.4 Pfade Pfade sind das Allround-Werkzeug von SVG: alle oben vorgestellten grafische Primitive lassen sich durch einen Pfad darstellen. Dazu ermöglichen Pfade das Zeichnen von Kurven. Das Konzept eines Pfades lässt sich gut mit dem Zeichnen mit einem Stift auf einem Blatt Papier beschreiben: Man setzt den Stift an und bewegt ihn dann auf eine bestimmte Art und Weise an eine andere Stelle. Die Bewegung des Stiftes wird mit einem sogenannten Pfadausdruck beschrieben; der Pfadausdruck enthält sequentiell angeordnete Befehle, welche die Stiftbewegung des Pfades definieren. Zusätzlich kann innerhalb eines Pfadausdrucks der Stift jederzeit an eine neue Stelle gesetzt werden; man spricht dann von einem Teilpfad. Definiert wird ein Pfad durch ein path-element, der Pfadausdruck wird im d-attribut angegeben. Abbildung 7 veranschaulicht in vier Schritten den sukzessiven Aufbau eines einfachen Pfadausdrucks 2. 2 mit genau einem Teilpfad

16 3.4 Pfade 15 1 Stift ansetzen 2 Linie zeichnen M L Kurve zeichnen Pfad schliessen C Z Abbildung 7: Aufbau eines Pfadausdrucks (konzeptionell) Das resultierende path-element lautet: <path d="m L C Z" style="stroke:black; fill:none;" /> Auch bei diesem Beispiel werden über ein style-attribut (vgl. Kap. 3.7) Darstellungseigenschaften verändert 3, da der Darstellungsstandard von Pfaden diese "unsichtbar macht. Der Pfadausdruck: Mögliche Befehle Der Pfadausdruck, angegeben im d-attribut eines gegebenen path-elements, besteht aus einer Reihe von Befehlen. Zu allen Befehlen gibt es immer zwei Möglichkeiten, die Bewegung des Stifts zu definieren: absolut und relativ. Bei absoluten Angaben wird die gewünschte Position mit Koordinaten im aktuellen Viewport definiert; relative Koordinaten bestimmen die Position relativ zur vorherigen Position und werden mit einem vorangestellten + bzw. - angegeben. Abbildung 8 zeigt beispielhaft eine Kurve, definiert mit relativen Koordinaten im Pfadausdruck. Eine vollständige Übersicht zu SVG-Pfaden und Pfadausdrücken liefert die Spezifikation ([SVG03]), Tabelle 2 gibt eine tabellarische Übersicht der in der Arbeit angewendeten Befehle. Dabei werden alle Koordinatenangaben eines Pfadausdrucks in User-Koordinaten angegeben. Hinweis: In der Parameter-Spalte werden Gruppen von Parametern in Klammern an- 3 hier: keine Füllfarbe, Linienzug schwarz

17 3.5 Text 16 <svg version="1.1" xmlns="..." width="400pt" height="300pt" viewbox=" "> 5 <path d="m c " 10 style="fill:none;" /> </svg> Viewbox: 400 x 300 Abbildung 8: Kurve mit relativen Koordinaten-Angaben gegeben. Ein + bedeutet, dass mehrere Gruppen von Parametern möglich sind. Name Befehl Parameter (s.u.) moveto lineto M (absolut) m (relativ) L (absolut) l (relativ) Beschreibung (x y)+ Startet einen (Teil-) Pfad an gegebener Position (x y); eine anschliessende Folge von Koordinatenpaaren wird als (implizite) Folge von lineto-befehlen interpretiert. Ein relativ angegebener Startpunkt wird als absolut definierter Startpunkt interpretiert. (x y)+ Zeichnet eine Linie von der aktuellen Position nach (x y). Eine Folge von Koordinatenpaare wird als Polyline3.3 interpretiert. closepath Z bzw. z Beendet den aktuellen (Teil-) Pfad und zeichnet eine curveto C (absolut) c (relativ) (x1 y1 x2 y2 x y)+ Linie zurück zum Start des (Teil-) Pfades. Zeichnet eine Bézierkurve von der aktuellen Position nach (x y) unter Berücksichtigung der Kontrollpunkte (x1 y1) und (x2 y2). Durch eine Folge von Koordinatenpaaren kann eine Folge von Bézierkurven gezeichnet werden; dabei definiert das letzte (x y)-paar den Endpunkt der Kurvenfolge. Tabelle 2: Möglichkeiten des Pfadausdrucks 3.5 Text Text wird innerhalb einer SVG-Grafik durch das text-element (vgl. Abb. 10) beschrieben. Es verhält sich wie ein normales Grafikobjekt und nimmt gegenüber den grafischen Primitiven keine Sonderrolle ein. Daraus folgt, dass weitere Darstellungsattribute über das style-attribut angegeben werden können. Kapitel 3.7 stellt vor, welche Attribute, auch für text-elemente, möglich sind. Definiert wird die Position von text-elementen über das x- und y-attribut. Dabei ist zu beachten, dass die Position eines Textelements links auf der sogenannten Basisli-

18 3.5 Text 17 nie des Textes (vgl. Abb. 9) beginnt. Dieser Punkt auf der Basislinie wird Text-Anker bezeichnet. Über das text-anchor-attribut kann dieser versetzt werden, Abbildung 9 veranschaulicht an einem Beispiel die drei Möglichkeiten left, middle und right. The quick brown fox Basislinie "left" "middle" "right" Text-Anker Abbildung 9: Basisline und Text-Anker Beispiel Abbildung 10 zeigt einen Text in einer SVG-Grafik. Über das text-anchor-attribut ist dieser genau in der Mitte des Viewports ausgerichtet. <svg version="1.1" xmlns=" width="400pt" height="300pt" 5 viewbox=" "> Position (x="200", y="150") 10 <text x="200" y="150" text anchor="middle" style="font-size:20;"> The quick brown fox The quick brown fox </text> 15 </svg> Viewbox: 400 x 300 Abbildung 10: text-element; SVG und resultierende Grafik Whitespace SVG behandelt bei text-elementen Zeilenumbrüche und alle Leerzeichen vor und hinter dem Text als Whitespace (zu ignorierender Text). Zusätzlich werden alle Tabulator-Zeichen in Leerzeichen umgewandelt und anschließend alle zusammenhängenden Leerzeichen zu einem verschmolzen. Daraus folgt, dass text-elemente immer nur einzeilige Textabschnitte beschreiben; mehrzeiliger Text muss aus einzelnen text-elementen zusammengesetzt werden.

19 3.6 Gruppen von Grafikobjekten 18 Beispiel Das text-element: <text> wenig Text, aber sehr viel Whitespace </text> wird nach der Entfernung von Whitespace zu einem Einzeiler : <text>wenig Text, aber sehr viel Whitespace</text> 3.6 Gruppen von Grafikobjekten Grafikobjekte, einfache Formen sowie Pfadobjekte, lassen sich durch das g-element zu einem Objekt gruppieren. Durch eine solche Gruppe können beliebig komplexe Grafiken zusammengesetzt werden. Zusätzlich können Gruppen selbst Teil anderer Gruppen sein. Beispiel <g> <rect x="100" y="100" width="100" height="100" /> <line x1="100" y1="100" x2="150" y2="50" /> <line x1="150" y1="50" x2="200" y2="100" /> 5 <g> <rect x="155" y="130" width="30" height="30" /> <rect x="115" y="130" width="30" height="60" /> </g> </g> Gruppen transformieren Gruppen lassen sich durch Angabe des transform-attributs beliebig im Koordinatensystem transformieren. Möglich sind: Translation, Skalierung und Rotation. Durch Schachtelung von Gruppen können beliebig viele Transformationen auf unterschiedlichste Weise auf derart gruppierte Grafikobjekte angewendet werden. Außerdem können oben angeführte Transformationen in einem transform-attribut auch direkt hintereinander definiert werden.

20 3.7 Cascading Style Sheets 19 Beispiel Die Abbildungen 11, 12 und 13 zeigen, jeweils mit SVG-Quelltext und -Grafik, die sequentielle Transformation einer Gruppe von grafischen Primitiven. Deutlich wird dabei, wie die Anwendungsreihenfolge die Gruppe im Viewport transformiert. <svg version="1.1" xmlns=" width="400" height="300"> 5 <g id="g1"> <rect x="25" y="25" width="25" height="25"/> <rect x="50" y="50" width="25" height="25"/> </g> 10 </svg> untransformierte Gruppe Viewbox: 400 x 300 Abbildung 11: Gruppe im Originalzustand <svg version="1.1" xmlns=" width="400" height="300"> 5 <g id="g1" transform="translate(150,0)"> <rect x="25" y="25" width="25" height="25"/> <rect x="50" y="50" width="25" height="25"/> </g> 10 </svg> Translation um (150,0) Viewbox: 400 x 300 Abbildung 12: Translation <svg version="1.1" xmlns=" width="400" height="300"> 5 <g id="g1" transform="rotate(45) translate(150,0)"> <rect x="25" y="25" width="25" height="25"/> <rect x="50" y="50" width="25" height="25"/> </g> 10 </svg> Rotation um 45 Viewbox: 400 x 300 Abbildung 13: Rotation 3.7 Cascading Style Sheets SVG unterstützt das Setzen von Darstellungseigenschaften mittels Cascading Style Sheets (CSS) [CSS2-01] das sog. Styling. CSS erlaubt es Autoren, Darstellungsvorgaben, z.b. Schriftarten oder Abstände, an strukturierte Dokumente 4 zu binden. Eine 4 HTML- oder XML-Dokumente wie SVG-Grafiken

21 3.7 Cascading Style Sheets 20 derartige Trennung von Darstellungsvorgaben vom Inhalt vereinfacht die Pflege solcher Dokumente und vermeidet Redundanzen. Das in dieser Arbeit vorgestellte Werkzeug verwendet grundsätzlich CSS zur Gestaltung von SVG-Grafiken. Eine vollständige Beschreibung aller Möglichkeiten bietet die SVG-Spezifikation unter [SVG04]; im Folgenden werden nur die benötigten Styling- Möglichkeiten und -Mechanismen vorgestellt Einführung Durch CSS-Styling-Attribute können alle möglichen Darstellungseigenschaften eines Grafikobjekts beeinflusst werden. Grundsätzlich sind Styling-Attribute Name-Wert- Paare; einer Eigenschaft x wird ein (neuer) Wert y zugewiesen, z.b. bei der Angabe "fill:#ff0000" wird der Eigenschaft fill (Füllfarbe) der Wert #ff0000 (Farbe Rot) zugewiesen. Bei der Verwendung von CSS kann das Aussehen der Objekte einer SVG-Grafik auf drei Arten definiert werden: 1. externe CSS-Datei 2. globale CSS-Definition in einem style-element innerhalb der SVG-Grafik 3. per Grafikobjekt durch Angabe eines style-attributs In externen CSS-Dateien und in globalen CSS-Definition innerhalb einer SVG-Grafik werden Stil-Angaben, durch Gruppierungen, entweder für alle Elemente eines bestimmten Typs (z.b. alle line-elemente) für Elemente einer bestimmten Klasse (definiert durch das class-attribut) für Elemente mit einem bestimmten Bezeichner; Instanz (definiert durch das id- Attribut) definiert. Eine Gruppe von Styling-Attributen wird wie folgt definiert: Bezeichner { } Alle innerhalb der geschweiften Klammern angegeben Styling-Attribute sind Teil der Gruppe. Tabelle 3 enthält dazu die Styling-Attribute, die in dieser Arbeit angewendet werden. Eine komplette Übersicht bietet [SVG05].

22 3.7 Cascading Style Sheets 21 Name font-family font-size fill stroke stroke-width stroke-dasharray Beschreibung Zu verwendende Schriftart Größe der Schrift Füllfarbe des Grafikobjekts Farbe des Linienzuges / des Rahmens eines Grafikobjekts Breite des Linienzuges / des Rahmens Ermöglicht unterschiedlichste Linienzüge Tabelle 3: Styling-Attribute Durch diese Techniken, indem also globale, klassenbezogene und instanzbezogene Styling-Attribute in Gruppen organisiert werden können, werden Redundanzen vermieden und die Flexibilität erhöht; auch ein Neu-Gestalten wird vereinfacht Verwendung eines externen Stylesheets Ein externes Stylesheet wird noch vor der eigentlichen SVG-Grafik eingebunden (vgl. Abb. 14). Dabei sind nicht nur lokale Dateien möglich, mit dem href -Attribut können alle, durch eine URL 5 auffindbare, Stylesheets eingesetzt werden. <?xml version="1.0" standalone="no"?> <?xml stylesheet href="styledefs.css" type="text/css"?> 5 <svg width="300" height="100" version="1.1" xmlns=" </svg> Abbildung 14: Stylesheets Bei der in Abbildung 14 gezeigten Referenz auf das externe Stylesheet styledefs.css handelt es sich um einen Verweis auf eine lokale Datei, die sich im selben Verzeichnis wie die SVG-Grafik befinden muss Globale CSS-Definition innerhalb der SVG-Grafik Ein globales style-element wird in einem zentralen defs-element innerhalb der SVG- Grafik eingebunden: <?xml version="1.0" standalone="no"?> <svg [...]> 5 <defs> 5 Unified Resource Locator

23 3.7 Cascading Style Sheets <style type="text/css"><![cdata[ [...] ]]></style> </defs> </svg> style-attribut am Grafikobjekt Neben externen Stylesheets und globalen CSS-Definition kann zusätzlich jedes SVG- Element individuell durch das style-attribut gestylt werden. Dort definierte Styling- Attribute überschreiben dabei alle bereits für das Element definierten Attribute (vgl. Kap ). Beispiel Das Beispiel veranschaulicht, wie eine Darstellungseigenschaft (hier: Farbe) eines Grafikobjekt der Klasse smallgreentext (s. Kap ) direkt durch ein entsprechendes style-attribut überschrieben wird. <svg version="1.1" xmlns=" width="400" height="300"> <defs> <style type="text/css"><![cdata[ 5.smallGreenText { font-size: 8pt; color: green; } ]]></style> 10 </defs> <text class="smallgreentext" style="color: red;" x="10" y="10"> Dies ist die erste Zeile des Klassikers "Der Name des Buches". 15 </text> </svg> Anwendungsreihenfolge Die Anwendungsreihenfolge von Style-Informationen ist wie folgt: Standardwert 6 ueberschreibt globales style-element globales style-element ueberschreibt externes Stylesheet externes Stylesheet ueberschreibt lokales style-attribut 6 aus der SVG-Spezifikation

24 3.7 Cascading Style Sheets 23 Alle Darstellungsattribute einer SVG-Grafik können also, unabhängig von innerhalb der Grafik definierten CSS-Angaben, durch Einbinden eines externen Stylesheets vollständig neu definiert werden Gruppen und CSS Die in Kapitel 3.6 eingeführten Gruppen können, wie andere SVG-Grafikobjete, ebenfalls mittels CSS gestylt werden. In einer Gruppe zusammengefasste Grafikobjekte erben dabei die Style-Angaben der Gruppe. Dabei gilt, dass explizite Style-Angaben von Elementen innerhalb einer Gruppe die Angaben der Gruppe überschreiben. Auch unterstützen Gruppen das Stylen mittels Klassen (class-attribut), Instanzen (id-attribut) und direktes Anführen von Style-Angaben durch ein style-attribut. Beispiel Das Beispiel in Abbildung 15 zeigt die Anwendung einiger Styling-Möglichkeiten auf grafische Primitive. Die in der Gruppe gesetzen Style-Angaben werden an die in der Gruppe zusammengefassten Rechtecke vererbt ; durch direkte Angabe eines style- Attribut können solche geerbten Angaben individuell überschrieben werden. <svg version="1.1" xmlns=" width="400" height="300"> 5 <g style="fill:none;stroke:black;stroke-width:2"> <rect x="50" y="150" width="50" height="50"/> <rect x="100" y="100" width="50" height="50" 10 style="stroke-dasharray:2,2;"/> <rect x="150" y="150" width="50" height="50"/> <rect x="200" y="100" width="50" height="50"/> <rect x="250" y="150" width="50" height="50" style="fill:black;"/> 15 <rect x="300" y="100" width="50" height="50"/> </g> Viewbox: 400 x 300 </svg> Abbildung 15: CSS, angewendet auf grafische Primitive Elementtyp-bezogene Styling-Attribute Entsprechend Kap können die Darstellungseigenschaften aller SVG-Grafikobjekte eines bestimmten Typs, z.b. alle Pfade (path-element), durch die Angabe einer CSS-Gruppe für den Elementtyp definiert werden, welche die gewünschten Styling- Attribute enthält.

25 3.7 Cascading Style Sheets 24 Beispiel Alle path-elemente sollen folgende Darstellungseigenschaften aufweisen: Füllfarbe Orange Farbe des Linienzuges: Grün Daraus ergibt sich folgende Style-Umgebung für path-elemente: path { fill: orange; stroke: green; } Klassenbezogene Styling-Attribute Eine Klasse wird einem SVG-Grafikobjekten durch das class-attribut zugewiesen. Um einer Klasse Styling-Attribute zuzufügen, wird eine Style-Umgebung mit dem Klassennamen definiert, angeführt durch einen Punkt:.NameOfClass { attr: value; } Beispiel Folgendes Beispiel zeigt eine SVG-Grafik, die global eine Klasse thickgreenline definiert und diese über das class-attribut zwei grafischen Primitiven zuweist. <svg version="1.1" xmlns=" width="400" height="300"> 5 <defs> <style type="text/css"><![cdata[.thickgreenline { stroke: green; stroke-width: 6; 10 } ]]></style> </defs> <path class="thickgreenline" 15 d="m l l z" /> <line class="thickgreenline" x1="5" y1="5" x2="90" y2="5" /> </svg>

26 3.8 Fazit Instanzbezogene Styling-Attribute Das id-attribut benennt die Instanz eines gegebenen Grafikobjekts. Der Instanz können in einer Style-Umgebung, bezeichnet mit dem Instanznamen und dem Präfix #, Darstellungsattribute zugewiesen werden. Beispiel Einem text-element wird über ein id-attribut die Instanz Buchtitel zugewiesen; im Anschluss folgt die Style-Umgebung. <svg [...]> <text id="buchtitel" x="50" y="150"> Der Name des Buches </text> 5 </svg> Style-Umgebung: #Buchtitel { font-family: serif; font-size: 28pt; font-weight: bold; color: blue; } 3.8 Fazit SVG ist ein offener Standard der bereits von unterschiedlichen, grafischen Werkzeugen (Editoren sowie Anzeigeprogrammen) unterstützt wird. Die Möglichkeit, Grafiken einfach durch eine Textausgabe zu erzeugen ist besonders von Vorteil, da somit keine, oft sehr aufwendige, Grafik-Bibliothek gebraucht wird. Da SVG-Grafiken als XML-Dokument vorliegen, sind sie durch das DOM (Document Object Model) zugreifbar. Dies ermöglich Scripting und das dynamische Verändern von SVG-Grafiken. Mit dem Einsatz von CSS und Scripting stellt SVG eines der flexibelsten Grafikformate dar und kommt aus diesen Gründen als Ausgabeformat zum Einsatz.

27 4 Layoutverfahren 26 4 Layoutverfahren Die dritte, wichtige Komponente bei der Graphvisualisierung ist, neben dem Eingabeformat GXL und der Ausgabesprache SVG, ein Werkzeug, das Layoutverfahren für Graphen bereitstellt. Layoutverfahren bestimmen algorithmisch die Position der Graphelemente (Knoten und Kanten) in der visuellen Repräsentation. Das in dieser Arbeit vorgestellte Werkzeug nutzt die GraphViz-Bibliothek für diese Aufgabe. 4.1 Grundlagen Grundsätzlich werden bei Layoutverfahren Knoten als geometrische Form, sogenannte Shapes, einer bestimmten Größe aufgefasst, Kanten hingegen als ein Linienzug. Die GraphViz-Bibliothek stellt für Knoten eine Reihe von Shapes zur Verfügung, der Linienzug einer Kante wird durch eine Bézier-Kurve repräsentiert. Für eine gegebene Menge von Knoten und Kanten, nachdem für Knoten eine Shape gewählt wurde, versucht ein Layoutverfahren diese durch einen Algorithmus anzuordnen. Die Knoten, bzw. die für ihre Darstellung gewählte Shape, werden dem Algorithmus entsprechend angeordnet und die Kanten dazwischen gezogen. 4.2 Layoutverfahren der GraphViz-Bibliothek GraphViz stellt drei Layoutverfahren zur Verfügung: ein Layoutverfahren nach Sugiyama [dot01], bei dem ein hierarchisches Layout des Graphen angestrebt wird. ein Verfahren nach Kamada-Kawai [neato01], das möglichst symmetrische Darstellungen erzeugt. ein Verfahren nach Wills [twopi01], das den Graph radial anordnet.

28 4.2 Layoutverfahren der GraphViz-Bibliothek 27 Abbildung 16: hierarchisch angeordneter Graph, nach Sugiyama Abbildung 17: symmetrisch angeordneter Graph, nach Kamada-Kawai

29 4.3 Fazit 28 Abbildung 18: radial angeordneter Graph, nach Wills Die Abbildungen 16, 17 und 18 geben jeweils ein Beispiel für die zur Verfügung stehenden Verfahren. 4.3 Fazit Layoutverfahren liefern für Graphen die Positionen der Knoten und für Kanten den Verlauf des Linienzuges. Layoutalg. Wissenschaft für sich ; deswegen GraphViz verwendet, das drei Verfahren zur Verfügung stellt, freigegeben unter Lizenz X; aber: Layoutverfahren als separater Baustein, Aussehen des Graphens und damit auch Eigenschaften des Layouts ausschließlich über Layoutspezifikation gesteuert - wird im nächsten Kapitel vorgestellt.

30 5 Die Layoutspezifikation 29 5 Die Layoutspezifikation Die Layoutspezifikation beschreibt das Aussehen des gesamten Graphen und die Darstellung der Graphelemente in der visuellen Repräsentation. Dazu definiert die Spezifikation eine Reihe von Layoutangaben (5.2). Obwohl GraphViz als Bibliothek für Layoutverfahren und SVG als primäres Ausgabeformat von diesem Werkzeug verwendet bzw. unterstützt werden, ist die Layoutspezifiaktion per se unabhängig von diesen Komponenten aufgebaut. Dadurch wird eine eventuelle Erweiterung des Werkzeugs um weitere Verfahren oder Ausgabeformat effektiv unterstützt. Im Folgenden wird zuerst auf wichtige Grundvoraussetzungen für die Spezifikation eingegangen. Anschließend wird die Realisierung der Layoutspezifikation und dabei die möglichen Layoutangaben im Detail beschrieben. 5.1 Rahmenbedingungen Grundvoraussetzung für eine von Graph-Layoutalgorithmen und Ausgabeformaten unabhängige Layoutspezifikation ist ein Satz von fest definierten Rahmenbedingungen. Zu diesen Rahmenbedingungen zählen: das Einheitensystem, das Koordinatensystem und die Darstellungsgrundlagen für Knoten und Kanten. Diese Rahmenbedingungen gelten für alle Layoutverfahren bzw. deren Implementation gleichermaßen. Basierend auf diesen Eingaben und den Layoutangaben der Spezifikation ermitteln Layoutverfahren die Positionen der Knoten und den Verlauf der Kantenzüge Einheitensystem Um eine möglichst große Unabhängigkeit vom Ausgabemedium zu erreichen, werden alle Angaben der Layoutspezifikation ohne Einheiten definiert (vgl. Kap.3.2). Die Interpretation der Längenangaben wird somit immer dem Ausgabemedium überlassen. Ist beispielsweise in der Spezifikation definiert, ein Knoten sei 100 Einheiten (sog. User-Einheiten) breit, so kann dieser bei der Darstellung am Monitor 100 Pixel breit sein, beim Druck auf Papier jedoch 100 Point Koordinatensystem Das verwendete Koordinatensystem entspricht dem SVG-Koordinatensystem. Es hat seinen Ursprung in der linken, oberen Ecke; die positive x-achse verläuft nach rechts 7 1 Point = 1/72 Zoll

31 5.1 Rahmenbedingungen 30 und die positive y-achse nach unten (vergl. Abb. 19). Das Koordinatensystem ist nicht auf den positiven Bereich beschränkt Grundlagen der Knotendarstellung global origin positive x-axis width positive y-axis height shape: rectangle edge node position edge control-points shape: ellipse Abbildung 19: Darstellung wichtiger Eigenschaften für Layout-Implementationen Unabhängig von der konkreten Darstellung eines Knotens spezifiziert in der Layoutspezifikation ist es notwendig, dessen Shape festzulegen. Diese ist eine einfache, geometrische Form und sie beschreibt nur den Umriss des Knoten. Auf die festgelegte Shape eines Knoten kann bei der Ermittlung der Kantenverläufe durch ein Layoutverfahren zurückgegriffen werden, um Start- und Endpunkt genau an die Knoten setzen zu können. Die konkrete Darstellung des Knotens sollte die gewählte Shape deshalb nach Möglichkeit immer genau ausfüllen, um fehlerhafte Kantenzüge zu vermeiden. Die Verwendung von Shapes für Layoutverfahren ermöglicht somit, ausgefallene Knotenformen zu zeichnen, ohne dass ein gegebenes Layoutverfahren die Knotenform im Detail kennen muss. Durch eine passende Shape ist sichergestellt, dass Kantenzüge vom Layoutverfahren dennoch korrekt gezogen werden können. Zwei mögliche Shapes zeigt exemplarisch Abbildung 19: ellipse und rectangle. Bei der Positionsbestimmung eines Knotens durch ein Layoutverfahren wird der Mittelpunkt der Bounding-Box der Shape des Knotens geliefert (Abb. 20).

32 5.1 Rahmenbedingungen 31 Bounding-Box shape: ellipse shape: diamond Mittelpunkt der Shape Abbildung 20: Mittelpunkte Grundlagen der Kantendarstellung Kanten werden durch Bézier-Kurven dargestellt. Eine Bézier-Kurve wird durch 3n + 1 Punkte beschrieben (n N 0 ). Abbildung 21 zeigt exemplarisch eine Bézier-Kurve für n = 2; der Startpunkt sei in diesem Beispiel p 1. Zusätzlich sind zur Veranschaulichung die Tangenten eingezeichnet. p 1 p 2 p 4 p 5 p 3 p p 7 6 Kantensymbol Abbildung 21: Bézier-Kurve (n = 2) Die Darstellung der Pfeilspitze (Kantensymbol) kann am Start- und / oder am Endpunkt der Bézier-Kurve erfolgen. Abbildung 21 zeigt exemplarisch das Kantensymbol am Ende der Kurve (hier: p 7 ). Unabhängig davon wird das Kantensymbol immer mit Hilfe des vorherigen oder nächsten Bézier-Kontrollpunktes gesetzt. Dies ermöglicht es, das Kantensymbol tangential an die Kurve zu setzen (in Abb. 21 zw. p 7 und p 6 ). Form und Größe des Kantensymbols sowie die Gestaltung der Kante selbst sind als Layoutangaben Teil der Layoutspezifikation.

33 5.2 Layoutangaben Layoutangaben Die Layoutspezifikation steuert Eigenschaften der visuellen Repräsentation über Layoutangaben. Dazu legt eine Layoutangabe jeweils eine Eigenschaft, zum Beispiel die Strichstärke der Kantenzüge oder die Schriftfarbe eines Knoten-Labels, fest. Eigenschaften Die durch Layoutangaben definierbaren Eigenschaften der SVG-Repräsentation des Graphen sind generell Name-Wert-Paare; einer Eigenschaft x wird der (feste) Wert y zugewiesen. Unterschieden wird dabei zwischen Layoutangaben, die den Graphen im Ganzen manipulieren (Kap. 7.4), und Angaben, die auf Graphelemente (Kap. 7.5) einwirken. Allen Layoutangaben ist desweiteren ein Standardwert zugewiesen. Das heisst, dass in einer konkreten Layoutspezifikation nur die Layoutangaben enthalten sein müssen, welche Werte neu definieren. Anfragengestützte Layoutangaben Im Allgemeinen weist eine Layoutangabe einer Eigenschaft einen festen Wert zu. Anfragengestützte Layoutangaben erweitern die Layoutspezifikation um die Möglichkeit, Eigenschaften abhängig vom Eingabegraphen, bzw. dessen Elementen, zu definieren (vgl. Kap. 7.3). Somit kann zum Beispiel die Anzahl der Kanten an einem Knoten x die Visualisierung von x beeinflussen. In einem solchen Fall wird eine Eigenschaft durch ein Name-Ausdruck 8 -Paar repräsentiert: Der Wert, welcher einer Eigenschaft x zugewiesen wird, ist das Ergebnis y der (Anfrage-) Auswertung des gegebenen Ausdrucks. Übersicht Realisiert sind eine Reihe von Layoutangaben, welche die Darstellung der Graphelemente bzw. die Darstellung des ganzen Graphen steuern. Die folgende Tabelle gibt eine Übersicht vorab, die Kapitel 7.4, 7.6 und 7.7 geben detailliert Auskunft über die hier zusammengefassten Möglichkeiten. Layoutangabe Graphdarstellung Layoutalgorithmus Größe der Gesamtgrafik Hintergrundfarbe Beschreibung Möglich sind die drei Verfahren der GraphViz-Bibliothek (s. Kap. 4.2) Die Größe der Visualisierung, welche den Graphen komplett darstellt, ist als Layoutangabe definierbar Für die Gesamtgrafik kann die Hintergrundfarbe definiert werden ( Papierfarbe ). 8 Ausdruck synonym zu GReQL-Anfrage

34 5.2 Layoutangaben 33 Knotendarstellung Darstellungsstil Beschriftung Schrift Umrandungslinie Größe Hintergrundfarbe Kantendarstellung Darstellung des Kantenzugs Beschriftung Kantenendsymbole Schrift Hintergrundfarbe Für Knoten sind eine Reihe von geometrischen Formen als Darstellungsstil möglich. Die Knotenbeschriftung ist frei als Layoutangabe definierbar. Die Schriftart und -größe der Knotenbeschriftung kann angepasst werden Der Rahmen des gewählten Darstellungsstil kann angepasst werden; möglich ist eine Veränderng der Farbe, der Strichstärke und -form (Strichelung o.ä.) des Rahmens Die Größe der Knotendarstellungen kann über Layoutangaben definiert werden; unterschieden wird zwischen Höhe und Breite. Diese Layoutangabe setzt die Hintergrundfarbe der geometrischen Form der Knotendarstellung. Wie bei der Umrandungslinie der Knotendarstellungen können die Kantenzüge eingefärbt werden und die Strichstärke sowie die Strichform angegeben werden. Bei Kanten kann die Beschriftung der Kante und eine Beschriftung für die Kantenendpunkte frei angegeben werden. Layoutangaben steuern, ob und welche Symbole gegebenenfalls dargestellt werden. Die Schriftart und Größe der Kantenbeschriftungen sind wie für Knoten über Layoutangaben einstellbar. Die Hintergrundfarben der Kantenbeschriftungen sind ebenfalls steuerbar.

35 6 Architektur 34 6 Architektur Das in dieser Arbeit vorgestellte Werkzeug basiert auf einer Reihe von Bausteinen; die GraphViz-Bibliothek übernimmt das Layouten von Graphen, die Layoutspezifikation ist als GSI-Applikation (s. Kap. 7) implementiert und diese wiederum benutzt intensiv die GReQL-Bibliothek. Auf den Schultern von Riesen stehend vereint dieses Werkzeug offene Standards in der Ein- und Ausgabe und flexible sowie performante Graphtechniken zu einem neuen Tool der Graphvisualisierung. Das Datenflussdiagramm in Abbildung 22 zeigt dazu die Umgebung des Werkzeugs. Layoutspez. (XML-Dok.) GSI GXL-Graph Layout- Spezifikation SVG Layouter Visualisierer GraphViz Layoutgraph Abbildung 22: Datenflussdiagramm des Werkzeugs 6.1 Designziele Der Layouter nutzt die Layoutspezifikation, um einen gegebenen Graphen zu layouten; die Ergebnisse (Knotenpositionen u.ä.) werden im Dokument Layoutgraph festgehalten. Der Layoutgraph ist nur ein Interface, um eine nahe an den verwendeten Layoutern stehende Implementation zu ermöglichen; für die GraphViz-Bibliothek ist eine Instanz des Layoutgraph-Interfaces implementiert. Außerdem kann das Werkzeug durch weitere Implementationen des Interfaces um andere Layoutverfahren erweitert werden. Ähnlich verhält es sich bei dem Visualisierer, der die Darstellung des Graphen mit den Informationen aus der Layoutspezifikation und dem Layoutgraph-Interface erzeugt. Auch der Visualisierer ist ein Interface, das für SVG als Ausgabe implementiert wurde. Beim Entwerfen und Realisieren der Werkzeugarchitektur wurden insgesamt folgende Designziele verfolgt: Das Tool sollte erweiterbar sein und zusätzlich um neue Layoutverfahren um neue Visualisierer

36 6.2 UML-Klassendiagramm 35 eine Bibliothek zur SVG-Graph-Visualisierung bereitstellen, sowie eine darauf aufbauende CLI 9 -Applikation bereitstellten. 6.2 UML-Klassendiagramm Das folgende Klassendiagramm in Abbildung 23 zeigt den Aufbau des Werkzeugs im Detail. Hervorzuheben sind dabei die beiden Interface-Klassen LayoutGraph und Writer; über diese Klassen werden zum einen Layoutverfahren und zum anderen weitere Visualisierer ermöglicht. Die GraphViz-Bibliothek ist über die von LayoutGraph abgeleitete Klasse GV_LayoutGraph eingebunden und die SVG-Visualisierung übernimmt SVGWriter, eine Implementation des Visualisierer-Interfaces Writer. GSIApplication Interface für Layoutverfahren Interface für Visualisierer LayoutSpec LayoutGraph Writer g2svg-bibliothek GV_LayoutGraph G2SVG SVGWriter Interface zur SVG-Graph- Visualisierung mit GraphViz Abbildung 23: UML-Klassendiagramm Die Layoutspezifikation (LayoutSpec) als GSI-Applikation, die Interfaces LayoutGraph und Writer sowie deren Implementationen für GraphViz und SVG bilden zusammen die Bibliothek g2svg, die über die Klasse G2SVG ein Interface zur Graphvisualisierung bereitstellt. Die g2svg-bibliothek wird von der in Kapitel 6.1 geforderten CLI-Applikation g2svg verwendet. Insbesondere die Bibliothek ist im Quelltext ausführlich dokumentiert und gibt dort weiterführende Hinweise zur Verwendung und Erweiterung um neue Layoutverfahren oder Visualisierer. 9 Command Line Interface