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. |
Verwendung
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:
|
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:
Im Falle einer angeklickten Kante:
|
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:
|
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. |