Zum Hauptinhalt springen

autoPlace()

Info

Die Methode autoPlace() funktioniert nur im Standardmodus des Diagramms und nur für Formen

Beschreibung​

Ordnet verbundene Diagrammformen automatisch in einer hierarchischen Struktur an

Verwendung​

autoPlace(config?: object): void;

Parameter​

  • config - (optional) ein Objekt mit Konfigurationseinstellungen für die automatische Platzierung. Wenn nicht angegeben, werden die Standardeinstellungen angewendet. Hier können Sie folgende Parameter festlegen:
    • mode - (optional) der Modus zum Verbinden von Formen, "direct" (Standard) oder "edges"
    • graphPadding - (optional) legt den Abstand zwischen nicht verbundenen Diagrammen fest, standardmäßig 200
    • placeMode - (optional) legt den Platzierungsmodus der Formen fest, "orthogonal" (Standard) oder "radial"
    • itemPadding - (optional) minimaler Abstand zwischen Elementen (der Mindestwert ist 1), standardmäßig 20
    • levelPadding - (optional) minimaler Abstand zwischen Hierarchieebenen (der Mindestwert ist 1), standardmäßig 20

Beispiel​

const diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

diagram.autoPlace({
    mode: "edges",
    placeMode: "radial"
});

Verbindungsmodi der Formen​

"direct"-Modus​

Verbindungslinien ohne Pfeile werden "von Mitte zu Mitte" ausgerichtet; sie sind gerade und diagonal.

"edges"-Modus​

Verbindungslinien werden "von Seite zu Seite" ausgerichtet.

Hinweis

Wenn fromSide und toSide für einen Link festgelegt sind, behält der Autoplatzierungsalgorithmus diese Werte bei, verwendet sie jedoch nicht bei der Berechnung der Platzierung. Die entscheidenden Eigenschaften, die Links definieren, sind from und to, während fromSide und toSide automatisch vom Algorithmus berechnet werden.

Info

Um den Linien Pfeile hinzuzufügen, geben Sie forwardArrow: "filled" oder backArrow: "filled" in der Konfiguration eines Linienobjekts an.

Die Verbindungslinien im "edges"-Modus können sein:

  • entweder gerade (wenn Sie die Eigenschaft connectType: "straight" eines Linienobjekts festlegen)

  • oder 90-Grad-gebogen (wenn Sie die Eigenschaft connectType: "elbow" eines Linienobjekts festlegen)

Platzierungsmodi der Formen​

"orthogonal"-Modus​

Formen werden entlang vertikaler und horizontaler Linien angeordnet

  • "orthogonal"-Anordnung mit Linien im "direct"-Modus

  • "orthogonal"-Anordnung mit Linien im "edges"-Modus

"radial"-Modus​

Formen werden auf gedachten Kreisen relativ zur zentralen Form angeordnet, d. h. der Form mit den meisten Verbindungen

  • "radial"-Anordnung mit Linien im "direct"-Modus

  • "radial"-Anordnung mit Linien im "edges"-Modus

Changelog:

  • Die Parameter itemPadding und levelPadding wurden in v6.1.3 hinzugefügt
  • Der Parameter placeMode wurde in v5.0 hinzugefügt
  • Die Eigenschaft autoplacement wurde in v3.0 hinzugefügt

Verwandter Artikel: Formen automatisch anordnen

Verwandte Beispiele:

Need more help?Contact Support