Lade...
 

Gerichteter Graph (WebWidget)

Gerichteter Graph (WebWidget)

Ein gerichteter Graph (auch Digraph genannt) besteht aus einer Menge von Knoten und einer Menge von gerichteten Kanten. Die Kanten sind in dem Sinne gerichtet, dass sie in eine eindeutige Richtung weisen. Wenn V die Menge aller Knoten ist, dann wird eine Kante durch das geordnete Paar (v, w) identifiziert, wobei v und w aus V sind.

Eine Schleife ist eine Kante, die einen Knoten mit sich selbst verbindet (v, v). Als Mehrfachkanten (Multikanten oder parallele Kanten genannt) bezeichnet man die Kanten, die das eine und selbe Knotenpaar miteinander verbinden. Mehrfachkanten kann man natürlich nicht mehr durch ein Knotenpaar eindeutig identifizieren, deswegen sollten sich die Kanten durch einen Text unterscheiden lassen, falls die eindeutige Identifizierung der Kanten von Intresse ist. In diesem Fall identifiziert man eine Kante durch (v, w, text).

In diesem WebWidget geht man von dem allgemeinen Graphen, der Schleifen und Mehrfachkanten zulässt, als den Standardgraphen aus, somit wird ein schleifenloser einfachkantiger Graph als einfacher oder schlichter Digraph genannt. Sollte man vom einfachen Digraphen als dem Standardgraphen ausgehen, so würde man sagen können: Dieses WebWidget unterstützt auch Multigraphen.

Beispiel für einen gerichteten Graphen
Beispiel für einen gerichteten Graphen

Verwendung

Web(digraph, APP("directedGraph.html"), 0, 0, 800, 600)

Abhängigkeiten

  • directedGraph.html
  • directedGraph-directive.js
  • dependencies/directedGraph-style.css
  • dependencies/d3.min.js
  • dependencies/dagre-d3.min.js

Nachrichtenschnittstelle

Bei der Richtungsbeschreibung wird das WebWidget in seine zwei Komponenten unterteilt. Das in HTML implementierte WebWidget, welches die Darstellungslogik und Nutzerinteraktion im Browser implementiert und das in InstantView implementierte WebWidget, welches die andere Seite mit den Daten aus ClassiX versorgt und es steuert.

Name Parameter Beschreibung
Push-Nachrichten (IV→HTML)
data Data Diese Nachricht übergibt ein Data-Objekt als CX_JSON_OBJECT ans WebWidget und enthält alle benötigten Daten, Styles und Optionen über den darzustellenden Graphen oder über nur einzelne Knoten und Kanten. Diese Nachricht kann beliebig oft geschickt werden. Je nach dem Inhalt der Nachricht (s. Option redraw), kann diese Nachricht eine ergänzende oder überschreibende Wirkung haben.
expand String|JSON

Mit dieser Steuernachricht können bestimmte Knoten, alle sichtbaren oder alle Knoten des Graphen aufgeklappt werden.

Als Parameter kann man das Folgende angeben:

  • "ALL": klappt alle Knoten auf. Falls es ungeladene Knoten gibt, werden sie mittels der Nachricht FETCH_ALL geholt und aufgeklappt.
  • "ALL_VISIBLE": klappt alle geladenen Knoten auf. Quellknoten mit ungeladenen Vorgängern bzw. Senken mit ungeladenen Nachfolgern fragen mittels FETCH_PREDECESSORS bzw. FETCH_SUCCESSORS nur nach ihren unmittelbaren Vorgängern bzw. Nachfolgern.
  • Die ID des Knotens:  Falls nur ein einzelner Knoten in beiden Richtungen aufgeklappt werden sollte, dann reicht die Angabe dessen ID.
  • Ein CX_JSON_ARRAY mit den IDs meherer Knoten: Dasselbe wie im vorigen Fall, jedoch für mehere Knoten auf einmal.
  • Ein CX_JSON_OBJECT der Form {preButton: X, sucButton: Y}: Hier kann man angeben, ob bestimmte Knoten nur am Vorgängerknopf bzw. nur am Nachfolgerknopf aufgeklappt werden sollen. Das Objekt kann auch nur aus preButton oder sucButton bestehen. X und Y können sowohl eine ID oder ein Array von IDs sein.
collapse String|JSON

Mit dieser Steuernachricht können bestimmte Knoten, alle sichtbaren oder alle Knoten des Graphen zugeklappt werden.

Die Parameterkonstellation ist analog zu derjenigen der Nachricht expand.

Ereignisse (HTML→IV)
INITIALIZE_SOCKET - Die erste Nachricht, die das WebWidget schickt, sobald es sich initialisiert hat. Dies signalisiert die Bereitschaft des WebWidgets, Push-Nachrichten zu empfangen und zu verarbeiten.
MOUSE_CLICK_SOCKET JSON-String

Wird gefeuert, wenn der Benutzer auf einen Knoten oder eine Kante klickt. 

Parameter: JSON-String mit den Attributen: 

Im Falle eines angeklickten Knotens:

  • die ID des angeklickten Knotens, falls ein Knoten angeklickt wurde.

Im Falle einer angeklickten Kante

  • from: die ID des Knotens, von dem die Kante ausgeht.
  • to: die ID des Knotens, in den die Kante hineingeht.
  • text: der Text der Kante, falls vorhanden.
DOUBLE_CLICK_SOCKET JSON-String

Wird gefeuert, wenn der Benutzer auf einen Knoten oder eine Kante doppelklickt. 

Die Parameter des JSON-String sind identisch mit denjenigen des MOUSE_CLICK_SOCKET-Events.

FETCH_PREDECESSORS_SOCKET String

Wird gefeuert, wenn der Benutzer einen Knoten am Vorgängerknopf aufklappt. ClassiX muss nur in dem Fall mit einer data-Nachricht darauf antworten, wenn der Stand der Vorgänger sich inzwischen aktualisiert hat bzw. dem WebWidget noch nicht mitgeteilt wurde. Ansonsten wird der Aufklappvorgang ohnehin mit den dem WebWidget bekannten Vorgängern durchgeführt.

Als Parameter wird die ID des aufgeklappten Knotens übergeben.

FETCH_SUCCESSORS_SOCKET String

Wird gefeuert, wenn der Benutzer einen Knoten am Nachfolgerknopf aufklappt. ClassiX muss nur in dem Fall mit einer data-Nachricht darauf antworten, wenn der Stand der Nachfolger sich inzwischen aktualisiert hat bzw. dem WebWidget noch nicht mitgeteilt wurde. Ansonsten wird der Aufklappvorgang ohnehin mit den dem WebWidget bekannten Nachfolgern durchgeführt.

Als Parameter wird die ID des aufgeklappten Knotens übergeben.

FETCH_ALL_SOCKET - Wird gefeuert, wenn das WebWidget alle Knoten aufklappen muss, jedoch nicht die nötigen Daten über alle Knoten und Kanten besitzt. Als Antwort erwartet das WebWidget eine data-Nachricht, in der alle Quellen-Knoten vorgängerlos (hasParents: false) und alle Senkknoten nachfolgerlos (hasChildren: false) sind.

 

Das Data-Objekt

Das Data-Objekt ist vom Typ CX_JSON_OBJECT und übermittelt die Knoten, Kanten, Styles und/oder Optionen der Darstellung. Ein Data-Objekt kann überschreibende, korrigierende, ergänzende oder löschende Daten enthalten. Es gibt keine obligatorischen Felder.

Feld Typ Beschreibung
nodes ARRAY(Node) Ein Array von Node-Objekten, die die Knoten im Graphen repräsentieren.
edges ARRAY(Edge) Ein Array von Edge-Objekten, die die Kanten im Graphen repräsentieren.
styles StylesObjekt Ein CX_JSON_OBJECT, dass die Style-Objekte als Member enthält. Der Name und der Identifikator eines Style-Objekts ist also nicht im Style-Objekt selber enthalten, sondern als ein Membername des gesamten Styles-Objekts.
options Options-Objekt Ein CX_JSON_OBJECT, dass alle Darstellungsoptionen des Graphen enthält.

 

Das Node-Objekt

Das Node-Objekt ist vom Typ CX_JSON_OBJECT und repräsentiert einen Knoten im Digraphen. Hervorgehobene Felder sind obligatorisch.

Feld Typ Standardwert Beschreibung
id String - Die eindeutige ID des Knotens
text String - Der Text eines Knotens. Mehrzeilige Angaben durch das Zeichen \n sind möglich.
icon String - Falls gewünscht, der Pfad zu einem Icon aus den ClassiX-Icons.
tooltipTitle String - Falls gewünscht bekommt der Knoten einen Tooltip mit einem Titel (einzeilig).
tooltipText String - Falls mehr Informationen als Detailtext im Tooltip angezeigt werden sollen, dann könnte man diese Option dafür benutzen.
hasSuccessors Boolean FALSE Diese Angabe ist nur für Senkknoten relevant, damit der Graph über die Existenz der ungeladenen, aber existierenden Nachfolger Bescheid weiß und dementsprechend einen Nachfolgerknopf anzeigt.
hasPredecessors Boolean FALSE Diese Angabe ist nur für Quellknoten relevant, damit der Graph über die Existenz der ungeladenen, aber existierenden Vorgänger Bescheid weiß und dementsprechend ein Vorgängerknopf anzeigt.
style String | Style-Objekt s. Style-Objekte Der Name des anzuwendenden Styles oder direkt ein individuelles Style-Objekt.
hoverStyle String | Style-Objekt s. Style-Objekte Der Name des anzuwendenden Styles beim Hovern dieses Knotens.
predecessors String | Array (String | Edge) -

Die ID bzw. IDs einer bzw. mehrerer Vorgänger oder gleich die Vorgängerkanten als Edge-Objekte. Gemischte Arrays sind möglich.

Alternativ könnte man die Relationen zwischen den Knoten unter edges konventionell festlegen.

successors String | Array (String | Edge) -

Die ID bzw. IDs einer bzw. mehrerer Nachfolger oder gleich die Nachfolgerkanten als Edge-Objekte. Gemischte Arrays sind möglich.

Alternativ könnte man die Relationen zwischen den Knoten unter edges konventionell festlegen.

delete Boolean FALSE Falls der Knoten gelöscht werden sollte, wird dieses Feld auf TRUE gesetzt. Die Identifizierung erfolgt durch das Feld id.

 

Hinweis: Knoten, die mit der ersten Nachricht oder mit einer überschreibenden Nachricht geschickt werden, heißen Primärknoten und verschwinden nicht, wenn ihre Kanten zugeklappt werden. 

 

Das Edge-Objekt

Das Edge-Objekt ist vom Typ CX_JSON_OBJECT und repräsentiert eine Kante im Digraphen. Hervorgehobene Felder sind obligatorisch.

Feld Typ Standardwert Beschreibung
from String - Die ID des Knotens, von dem diese Kante ausgeht.
to String - Die ID des Knotens, in den diese Kante hineingeht.
text String - Die Beschriftung der Kante, falls eine Beschriftung gewünscht ist. Dieses Feld wird jedoch auch zur Identifizierung der Kante in Multigraphen verwendet und könnte in bestimmten Fällen praktisch obligatorisch sein. Siehe die Einleitung dieses Artikels.
newText String - Falls der Text einer Kante aktualisiert werden sollte, muss man den neuen Text unter newText angeben, da das Feld text zur Identifizierung der Kante verwendet wird. 
style String | Style-Objekt s. Style-Objekte Der Name des anzuwendenden Styles oder direkt ein individuelles Style-Objekt.
hoverStyle String | Style-Objekt s. Style-Objekte Der Name des anzuwendenden Styles beim Hovern dieser Kante.
tooltipTitle String - Falls gewünscht bekommt der Knoten einen Tooltip mit einem Titel (einzeilig).
tooltipText String - Falls mehr Informationen als Detailtext im Tooltip angezeigt werden sollen, dann könnte man diese Option dafür benutzen.
delete Boolean FALSE Falls die Kante gelöscht werden sollte, wird dieses Feld auf TRUE gesetzt. Die Identifizierung erfolgt über die Felder from, to und text. Wenn text weggelassen wird, werden alle Kanten zwischen den beiden Knoten gelöscht.
Relevant nur im Falle der Benutzung in Zusammenhang mit den Optionen successors und predecessors von Knoten
id String - Die ID des Vorgängers bzw. des Nachfolgers, den diese Kante mit dem ihre Definition enthaltenden Knoten verbindet. In diesem Fall sind die Angaben from und to nicht zulässig, da redundant.

 

Das Style-Objekt

Das Style-Objekt ist ein CX_JSON_OBJECT und beinhaltet mehrere Eigenschaften zur Anpassung der Darstellung von Knoten und Kanten. Der Sinn eines Style-Objekts besteht darin, dass es für mehrere Knoten und Kanten verwendet werden kann, ohne es an mehreren Stellen redundant definieren zu müssen.

Eigenschaft Typ Beim Hovern Standardwert Beschreibung
Style-Eingenschaften für Knoten
shape String Nicht veränderbar rect Die Form eines Knotens. Unterstützt sind die Formen: rect, ellipse, circle, diamond
rx Integer Nicht veränderbar 5 Der horizontale Krümmungsradius in Pixel an der Ecke eines Rechtecks. Nur mit rect anwendbar.
ry Integer Nicht veränderbar 5 Der vertikale Krümmungsradius in Pixel an der Ecke eines Rechtecks. Nur mit rect anwendbar.
paddingLeft Integer Nicht veränderbar 10 Der zusätzliche linke Innenabstand eines Knotens in Pixel.
paddingRight Integer Nicht veränderbar 10 Der zusätzliche rechte Innenabstand eines Knotens in Pixel.
paddingTop Integer Nicht veränderbar 10 Der zusätzliche obere Innenabstand eines Knotens in Pixel.
paddingBottom Integer Nicht veränderbar 10 Der zusätzliche untere Innenabstand eines Knotens in Pixel.
predecessorsCollapsible Boolean Nicht veränderbar TRUE

Deaktiviert die Möglichkeit, dass der Benutzer einen Knoten am Vorgängerknopf auf- oder zuklappen kann. Der Knoten kann dann nur programmatisch mittels der Eigenschaft predecessorsCollapsed oder der Steuernachrichten expand und collapse auf- und zugeklappt werden.

Quellknoten mit ungeladenen Vorgängern bilden eine Ausnahme und gehorchen dieser Regel nicht.

successorsCollapsible Boolean Nicht veränderbar TRUE

Deaktiviert die Möglichkeit, dass der Benutzer einen Knoten am Nachfolgerknopf auf- oder zuklappen kann. Der Knoten kann dann nur programmatisch mittels der Eigenschaft successorsCollapsed oder der Steuernachrichten expand und collapse auf- und zugeklappt werden.

Senkknoten mit ungeladenen Nachfolgern bilden eine Ausnahme und gehorchen dieser Regel nicht.

predecessorsCollapsed Boolean Nicht veränderbar FALSE Wenn gesetzt, wird der Knoten am Vorgängerknopf zugeklappt, ansonsten aufgeklappt.
successorsCollapsed Boolean Nicht veränderbar FALSE Wenn gesetzt, wird der Knoten am Nachfolgerknopf zugeklappt, ansonsten aufgeklappt.
borderColor String Veränderbar #999 Randfarbe des Knotens im HTML-Farbenstring-Format.
borderWidth Integer Veränderbar 1 Randbreite des Knotens in Pixel.
bgColor String Veränderbar #fff Hintergrundfarbe des Knotens im HTML-Farbenstring-Format.
textColor String Veränderbar #000 Textfarbe des Knotens im HTML-Farbenstring-Format.
cursor String Veränderbar auto Bestimmt die Darstellung des Mauscursors, wenn er den Knoten hovert. Die möglichen Werte sind den normalen CSS-Regeln zu entnehmen. Häufig benutzt man 'pointer' zur Anzeige einer Hand.
Style-Eigenschaften für Kanten
arrowhead String Nicht veränderbar vee Bestimmt die Darstellungsform der Kantenspitze. Mögliche Werte sind: vee, normal und undirected. Undirected verwandelt den Graphen nur äußerlich in einen ungerichteten Graphen.
curveType String Nicht veränderbar basis Das Interpolationsverfahren der Kanten zwischen den Knoten. Mögliche Werte sind: linear, step, stepBefore, stepAfter, basis, cardinal, monotoneX, carmullRom
textColor String Veränderbar #999 Textfarbe der Kante im HTML-Farbenstring-Format.
lineColor String Veränderbar #999 Kantenfarbe im HTML-Farbenstring-Format.
lineWidth Integer Veränderbar 2 Kantenbreite in Pixel.
cursor String Veränderbar auto Bestimmt die Darstellung des Mauscursors, wenn er die Kante hovert. Die möglichen Werte sind den normalen CSS-Regeln zu entnehmen. 
zIndex Integer Nicht veränderbar 0 Kantenstyles mit einem höheren zIndex-Wert lassen ihre Kanten über denjenigen liegen, die einen Kantenstyle mit einem niedrigeren zIndex-Wert haben. Dies wird meist benutzt, um zu bestimmen, welche Kantenfarbe angezeigt werden soll, wenn zwei verschiedenfarbige Kanten sich überschneiden.

 

Das Options-Objekt

Das Options-Objekt ist vom Typ CX_JSON_OBJECT und enthält diverse allgemeine Einstellugnen zur Anpassung des Graphen insgesamt. Keine Einstellung ist obligatorisch.

Feld Typ Standardwert Beschreibung
direction String TB

Legt die Ausrichtung des Graphen fest. Mögliche Werte sind:

  • TB: von oben nach unten
  • BT: von unten nach oben
  • RL: von rechts nach links
  • LR: von links nach rechts
edgeSpacing Integer 10 Legt den Mindestabstand zwischen den Kanten in Pixel fest
nodeSpacing Integer 10 Legt den Mindestabstand zwischen den Knoten in Pixel fest
levelSpacing Integer 60 Legt den Mindestabstand zwischen den Knotenstufen (Vorgänger und Nachfolger) in Pixel fest.
horizontalLabels Boolean FALSE Standardmäßig wird versucht, dass bei ausreichender Kantenlänge die Beschriftung einer Kante ihrem Verlauf folgt, ansonsten wird die Beschriftung horizontal ausgerichtet. Mit dieser Option kann man die Ausrichtung der Beschriftung immer horizontal festlegen, unabhängig von dem Verlauf oder der Länge einer Kante.
arrowSpacing Integer 35 Wenn mehrere Kanten in einen Knoten hineinführen oder aus einem Knoten hinausführen, werden sie zu einem Punkt zusammengefasst und ihre Pfeilspitzen vereinigen sich zu einer einzigen gemeinsamen Pfeilspitze. Der Abstand zwischen der Pfeilspitze und dem Zusammenführungspunkt wird durch diese Option festgelegt. Bei hinausgehenden Kanten bestimmte diese Option die Länger der senkrechten Linien, da keine Pfeilspitzen existieren.
defaultNodeStyle Style-Objekt s. Style-Objekt Mit dieser Option kann man einen Standardwert für den Style aller Knoten festlegen, die keinen eigenen Style haben.
defaultNodeHoverStyle Style-Objekt - Mit dieser Option kann man einen Standardwert für den beim Maushovern anzuwendenen Style aller Knoten festlegen, die keinen eigenen Hover-Style haben.
defaultEdgeStyle Style-Objekt s. Style-Objekt Mit dieser Option kann man einen Standardwert für den Style aller Kanten festlegen, die keinen eigenen Style haben.
defaultEdgeHoverStyle Style-Objekt - Mit dieser Option kann man einen Standardwert für den beim Maushovern anzuwendenden Style aller Knoten festlegen, die keinen eigenen Hover-Style haben.
redraw Boolean FALSE Wenn gesetzt, werden alle im Graphen schon vorhandenen Knoten und Kanten verworfen und mit den neuen überschrieben. Ansonsten hat jede data-Nachricht eine komplemtäre Wirkung, um sukzessive Graphenbildung zu ermöglichen.