Für Experten: Weitere Tipps für das Baumstrukturlayout

Ost-West-Nachbarn angeben

Sie können angeben, dass zwei nicht zusammengehörende Knoten direkte Nachbarn in einer Richtung sein müssen, die senkrecht zur Arbeitsrichtung ist. Im Ebenenmodus und im Radiallayoutmodus werden die Knoten in derselben Ebene nebeneinander platziert. Im Modus für freies Layout und in den Tip-over-Modi werden die Knoten am nördlichen Rand ausgerichtet platziert. Solche Knoten werden Ost-West-Nachbarn genannt, weil ein Knoten als direkter Nachbar auf der östlichen Seite des anderen Knotens platziert wird. Der andere Knoten wird der direkte Nachbar auf der westlichen Seite des ersten Knotens. (Siehe auch Kompassrichtungen für positionsgebundene Layoutparameter verwenden (TL)).
Technisch gesehen, werden die Knoten als übergeordneter Knoten und untergeordneter Knoten behandelt, obwohl kein Link zwischen ihnen existiert. Deshalb kann einer der beiden Knoten einen realen übergeordneten Knoten haben, aber der andere Knoten nicht, weil sein virtueller übergeordneter Knoten sein Ost-West-Nachbar ist.
Das Merkmal für Ost-West-Nachbarn kann beispielsweise verwendet werden, um Knoten in einer typisierten Syntaxstruktur zu annotieren, die im Compilerbau vorkommt. Annotierte Syntaxstruktur der Anweisung a[25] = b[24] + 0.5; zeigt ein Beispiel für eine solche Baumstruktur.
Abbildung eines Baumstrukturlayouts, die
den Parameter für Ost-West-Nachbarschaft veranschaulicht
Annotierte Syntaxstruktur der Anweisung a[25] = b[24] + 0.5;
Verwenden Sie die folgende Methode, um festzulegen, dass zwei Knoten Ost-West-Nachbarn sind:
treeLayout.setEastWestNeighboring(eastNode, westNode);
Sie können auch die folgende Funktion verwenden, die mit Ausnahme der umgekehrten Parameterreihenfolge identisch ist:
treeLayout.setWestEastNeighboring(westNode, eastNode);
Wenn die Arbeitsrichtung nach unten verläuft, lässt sich die letztere der beiden Methoden unter Umständen einfacher merken, weil in diesem Fall Westen links vom Osten im Layout ist, was dem Textfluss der Parameter gleicht.
Verwenden Sie die folgenden Aufrufe, um den Knoten abzurufen, der der Ost- oder Westnachbar eines Knotens ist.
var eastNode = treeLayout.getEastNeighbor(westNode);
var westNode = treeLayout.getWestNeighbor(eastNode);
Jeder Knoten kann maximal einen Ostnachbarn und einen Westnachbarn haben, weil sie direkte Nachbarn sind. Wenn mehrere direkte Nachbarn angegeben werden, werden diese Angaben teilweise ignoriert. Zyklische Spezifikationen können ebenfalls zu Konflikten führen. Wenn Knoten B beispielsweise der Ostnachbar von Knoten A und Knoten C der Ostnachbar von Knoten B ist, dann kann Knoten A nicht der Ostnachbar von Knoten C sein. (Genau genommen, könnten solche Zyklen in einigen Situationen im Radiallayoutmodus technisch möglich sein, aber trotzdem sind sie in allen Layoutmodi nicht zulässig.)
Wenn B der Ostnachbar von A ist, dann ist A automatisch der Westnachbar von B. Der Ostnachbar von A kann selbst einen anderen Ostnachbarn haben. Auf diese Weise können Sie Ketten von Ost-West-Nachbarn erstellen. Dies ist eine gängige Methode für die Visualisierung von Listen von Baumstrukturen. Zwei Beispiele sehen Sie in Abbildung Ketten von Ost-West-Nachbarn für die Visualisierung von Listen von Baumstrukturen.
Abbildung von Baumstrukturlayouts, die
Ketten von Ost-West-Nachbarschaften veranschaulicht
Ketten von Ost-West-Nachbarn für die Visualisierung von Listen von Baumstrukturen

Linkkategorien abrufen

Der Algorithmus für Baumstrukturlayout arbeitet mit einem Spanning Tree, wie bereits in TL-Algorithmus erwähnt. Wenn der anzulegende Graph keine reine Baumstruktur ist, ignoriert der Algorithmus einige Links. Damit solche Links auf eine spezielle Weise behandelt werden, können Sie eine Liste der nicht zur Baumstruktur gehörenden Links anfordern.
Da es übergeordnete und untergeordnete Knoten im Spanning Tree gibt, muss eine Unterscheidung zwischen den folgenden Linkkategorien getroffen werden:
  • Ein vorwärts gerichteter Baumstrukturlink ist ein Link von einem übergeordneten Knoten zu seinem untergeordneten Knoten.
  • Ein rückwärts gerichteter Baumstrukturlink ist ein Link von einem untergeordneten Knoten zu seinem übergeordneten Knoten. Wenn der Link als gerichteter Pfeil gezeichnet wird, zeigt der Pfeil in die entgegengesetzte Richtung zur Arbeitsrichtung.
  • Ein nicht zur Baumstruktur gehörender Link ist ein Link zwischen zwei nicht zusammengehörenden Knoten. Keiner der Knoten ist ein untergeordneter Knoten des jeweils anderen.
Abbildung, die die verschiedenen Linkkategorien veranschaulicht
Linkkategorien
Der Layoutalgorithmus verwendet diese Linkkategorien intern, speichert sie aber nicht permanent, um Zeit einzusparen und die Speichereffizienz zu gewährleisten. Wenn Sie möchten, dass einige Linkkategorien auf eine spezielle Weise behandelt werden (z. B., um das Link-Layout für die nicht zur Baumstruktur gehörenden Links aufzurufen), müssen Sie vor dem Layout angeben, dass Sie nach dem Layout auf die Linkkategorien zugreifen möchten.
Verwenden Sie dazu die Methode setCategorizingLinks wie folgt:
  treeLayout.setCategorizingLinks(true);
  graph.setNodeLayout(treeLayout);
  graph.performGraphLayout();
  var link;
  var forwardLinks = treeLayout.getCalcForwardTreeLinks();
  console.log("forward links:");
  while(forwardLinks.hasNext()){
   link = forwardLinks.next();
   console.log(link.getStartNode().getLabel() + " -> " + link.getEndNode().getLabel());
  }
  var backwardLinks = treeLayout.getCalcBackwardTreeLinks();
  console.log("backward links:");
  while(backwardLinks.hasNext()){
   link = backwardLinks.next();
   console.log(link.getStartNode().getLabel() + " -> " + link.getEndNode().getLabel());
  }
  var nonTreeLinks = treeLayout.getCalcNonTreeLinks();
  console.log("non-tree links:");
  while(nonTreeLinks.hasNext()){
   link = nonTreeLinks.next();
   console.log(link.getStartNode().getLabel() + " -> " + link.getEndNode().getLabel());
  }
Nach der Ausführung des Layouts können Sie auf die Linkkategorien zugreifen.
Die Linkkategoriedaten werden jedesmal ausgefüllt, wenn das Layout aufgerufen wird, sofern Sie nicht die Methode setCategorizingLinks(false) aufrufen.

Folgen von Layouts mit inkrementellen Änderungen

Sie können mit Baumstrukturen arbeiten, die nicht mehr auf dem neuesten Stand sind, z. B. Baumstrukturen, die mit weiteren untergeordneten Knoten erweitert werden müssen. Wenn Sie nach einer Erweiterung ein Layout ausführen, möchten Sie wahrscheinlich die Teile identifizieren, die bereits im ursprünglichen Graphen angelegt wurden. Der Algorithmus für Baumstrukturlayout unterstützt diese inkrementellen Änderungen im inkrementellen Modus, weil er die vorherigen Positionen der Knoten berücksichtigt. Er behält die relative Reihenfolge der untergeordneten Knoten im nachfolgenden Layout bei.
Im nicht inkrementellen Modus berechnet der Algorithmus für Baumstrukturlayout die Reihenfolge der untergeordneten Knoten anhand der Knotenreichenfolge, die durch das zugeordnete Graphenmodell (bzw. durch den Graphen) vorgegeben ist.
In diesem Fall ist das Layout von den Positionen der Knoten vor dem Layout unabhängig. Die relative Reihenfolge der untergeordneten Knoten wird in nachfolgenden Layouts nicht beibehalten.
Der inkrementelle Modus ist standardmäßig aktiviert.
Gehen Sie zum Inaktivieren des inkrementellen Modus wie folgt vor:
Rufen Sie Folgendes auf:
treeLayout.setIncrementalMode(false);

Interaktive Bearbeitung

Die Tatsache, dass die relative Reihenfolge des Layouts beibehalten wird, ist bei der interaktiven Bearbeitung hilfreich. Sie ermöglicht Ihnen, das Layout ohne großen Aufwand zu korrigieren. Wenn das erste Layout Knoten A beispielsweise links von seinem gleichgeordneten Knoten B platziert, Sie aber die Reihenfolge umkehren müssen, können Sie einfach Knoten A auf die rechte Seite von Knoten B verschieben und ein neues Layout starten, um die Zeichnung zu bereinigen. Im zweiten Layout bleibt a rechts von B, und die untergeordnete Baumstruktur von A "folgt" Knoten A.
Drei Bilder, die den Effekt
des Verschiebens eines Knotens und anschließender Wiederholung des Layouts veranschaulichen
Interaktive Bearbeitung zum Erreichen einer bestimmten Reihenfolge von untergeordneten Knoten

Reihenfolge untergeordneter Knoten festlegen

Einige Anwendungen setzen eine bestimmte relative Reihenfolge der untergeordneten Knoten in der Baumstruktur voraus. Das bedeutet beispielsweise für die Arbeitsrichtung nach unten, welcher untergeordnete Knoten links von einem anderen untergeordneten Knoten platziert werden muss.
Dies kann im nicht inkrementellen Modus erreicht werden, indem ein Knotenvergleichsoperator angegeben wird, wie im folgenden gezeigt wird:
  treeLayout.setNodeComparator(function(node1, node2) {
   // for example: sort nodes by increasing width
   return node1.getBounds().width - node2.getBounds().width;
  });
Der Vergleichsoperator gibt die Reihenfolge gemäß Definition in der folgenden Tabelle an. Für eine reguläre Ausrichtung führt dies dazu, dass die Koordinaten der untergeordneten Knoten erhöht werden. Für die Tip-over-Ausrichtung führt dies zur Erhöhung des Abstands zum übergeordneten Knoten. Für die Ballon- und Radialmodi führt diese zu Anordnungen im Uhrzeigersinn.
Layoutmodus Ausrichtung Arbeitsrichtung Reihenfolge
Frei, Ebene, Tip-over Kein Tip-over Unten Links nach rechts
Oben Links nach rechts
Links Oben nach unten
Rechts Oben nach unten
Frei, Ebene, Tip-over Tip-over Unten Oben nach unten
Oben Unten nach oben
Links Rechts nach links
Rechts Links nach rechts
Radial, Ballon Beliebig Beliebig Im Uhrzeigersinn