1. Zuhause
  2. Frage und Antwort
  3. GoJs Ist es möglich, mehrere Layouts in einem Diagramm zu haben

GoJs Ist es möglich, mehrere Layouts in einem Diagramm zu haben

2016-04-22 6 views

Antwort

3

Es gibt viele Möglichkeiten, wie Sie Ihr Ziel erreichen können. Ich kann mir dreien aus der Hand vorstellen. In absteigender Reihenfolge der Arbeit:

  • Erstellen eines benutzerdefinierten Layout- das tut, was Sie wollen. Dies ist am allgemeinsten und kann am besten mit den Datenstrukturen kompatibel sein, die Sie mit Ihren beiden vorhandenen Diagrammen verwendet haben, die Sie kombinieren möchten.
  • In Ihrem Fall können Sie möglicherweise die TableLayout verwenden, die sich im Verzeichnis extensions befindet: http://gojs.net/latest/extensions/Table.html. Sie könnten wahrscheinlich weiterhin Group s verwenden, aber Sie würden Group.layout auf Null setzen, so dass sie vollständig ignoriert werden, wenn das Layout ausgeführt wird.
  • Fügen Sie alles in einem Ihrer vorhandenen Diagramme in eine Gruppe ein und fügen Sie alles aus Ihrem anderen vorhandenen Diagramm in eine andere Gruppe ein. Die Diagram.layout des ersten wäre die Group.layout der ersten Gruppe, und die Diagram.layout des zweiten Diagramm würde die Group.layout der zweiten Gruppe sein.

Beachten Sie, dass jedes Diagramm haben genau ein Modell (die Diagram.model), so dass für alle drei Techniken müssten Sie alle Daten in einem einzigen Modell hinzugefügt werden, ohne Referenzen zu bekommen zwischen Sie sind verwirrt. Das bedeutet, dass Sie sicherstellen müssen, dass die Schlüssel für die Knoten alle eindeutig sind.

Hier ist ein Beispiel, wie Sie mit der dritten Technik zwei separate Diagramme in ein einzelnes Diagramm einfügen können. Ich beginne mit zwei Kopien der Minimal-Probe, http://gojs.net/latest/samples/minimal.html, wo die einzige Änderung ist, hat eine ForceDirectedLayout und die andere hat eine LayeredDigraphLayout. So wird man definiert werden:

myDiagram = $(go.Diagram, "myDiagramDiv", 
       { 
       initialContentAlignment: go.Spot.Center, 
       layout: $(go.ForceDirectedLayout), 
       "undoManager.isEnabled": true 
       });

und der andere definiert werden:

myDiagram = $(go.Diagram, "myDiagramDiv", 
       { 
       initialContentAlignment: go.Spot.Center, 
       layout: $(go.LayeredDigraphLayout), 
       "undoManager.isEnabled": true 
       });

Aber sonst diese beiden Diagramme sind genau wie die Minimal Probe.

Zu Beginn jedes Modell der Minimal wird erstellt:

myDiagram.model = new go.GraphLinksModel(
[ 
    { key: "Alpha", color: "lightblue" }, 
    { key: "Beta", color: "orange" }, 
    { key: "Gamma", color: "lightgreen" }, 
    { key: "Delta", color: "pink" } 
], 
[ 
    { from: "Alpha", to: "Beta" }, 
    { from: "Alpha", to: "Gamma" }, 
    { from: "Beta", to: "Beta" }, 
    { from: "Gamma", to: "Delta" }, 
    { from: "Delta", to: "Alpha" } 
]);

So haben wir zunächst ein kombiniertes Modell, das die beiden Modelle zusammenaddiert ist erstellen müssen. Eine Möglichkeit, sie zusammen zu stellen ist:

myDiagram.model = new go.GraphLinksModel(
[ 
    { key: "Alpha", color: "lightblue" }, 
    { key: "Beta", color: "orange" }, 
    { key: "Gamma", color: "lightgreen" }, 
    { key: "Delta", color: "pink" }, 
    { key: "Alpha2", color: "lightblue" }, 
    { key: "Beta2", color: "orange" }, 
    { key: "Gamma2", color: "lightgreen" }, 
    { key: "Delta2", color: "pink" } 
], 
[ 
    { from: "Alpha", to: "Beta" }, 
    { from: "Alpha", to: "Gamma" }, 
    { from: "Beta", to: "Beta" }, 
    { from: "Gamma", to: "Delta" }, 
    { from: "Delta", to: "Alpha" }, 
    { from: "Alpha2", to: "Beta2" }, 
    { from: "Alpha2", to: "Gamma2" }, 
    { from: "Beta2", to: "Beta2" }, 
    { from: "Gamma2", to: "Delta2" }, 
    { from: "Delta2", to: "Alpha2" } 
]);

Wieder werde ich erwähnen, dass dies Arbeit, die Sie brauchen würde, ganz gleich zu tun, die Technik, die Sie verwendet. Vermutlich hast du das schon gemacht und fragst dich nur, wie man mit zwei Layouts umgeht.

Die dritte Technik, die ich vorgeschlagen verwendet Gruppe s zu kapseln, was ursprünglich in einem ganzen Diagramm gewesen war. Lassen Sie uns also auf das Modell zwei Gruppen hinzufügen und jeder der ursprünglichen Knoten zu der entsprechenden Gruppe zuweisen:

myDiagram.model = new go.GraphLinksModel(
[ 
    { key: "FD", isGroup: true, category: "FD" }, // NEW 
    { key: "LD", isGroup: true, category: "LD" }, // NEW 
    { key: "Alpha", color: "lightblue", group: "FD" }, 
    { key: "Beta", color: "orange", group: "FD" }, 
    { key: "Gamma", color: "lightgreen", group: "FD" }, 
    { key: "Delta", color: "pink", group: "FD" }, 
    { key: "Alpha2", color: "lightblue", group: "LD" }, 
    { key: "Beta2", color: "orange", group: "LD" }, 
    { key: "Gamma2", color: "lightgreen", group: "LD" }, 
    { key: "Delta2", color: "pink", group: "LD" } 
], 
[ 
    { from: "Alpha", to: "Beta" }, 
    { from: "Alpha", to: "Gamma" }, 
    { from: "Beta", to: "Beta" }, 
    { from: "Gamma", to: "Delta" }, 
    { from: "Delta", to: "Alpha" }, 
    { from: "Alpha2", to: "Beta2" }, 
    { from: "Alpha2", to: "Gamma2" }, 
    { from: "Beta2", to: "Beta2" }, 
    { from: "Gamma2", to: "Delta2" }, 
    { from: "Delta2", to: "Alpha2" } 
]);

Jetzt brauchen wir nur jede Gruppe/Kategorie/Vorlage zu definieren:

myDiagram.groupTemplateMap.add("FD", 
    $(go.Group, "Auto", 
    { layout: $(go.ForceDirectedLayout) }, 
    $(go.Shape, { fill: "white", stroke: "lightgray" }), 
    $(go.Placeholder, { padding: 10 }) 
)); 

myDiagram.groupTemplateMap.add("LD", 
    $(go.Group, "Auto", 
    { layout: $(go.LayeredDigraphLayout) }, 
    $(go.Shape, { fill: "white", stroke: "lightgray" }), 
    $(go.Placeholder, { padding: 10 }) 
));

Für die Zwecke dieser Demonstration sind die Details der visuellen Erscheinung jeder Art von Gruppe egal, genauso wenig wie die Details des Aussehens der Knoten und Verbindungen. Für Sie ist es wichtig, dass eine Gruppenvorlage ein Layout verwendet und die andere eine andere, es gibt zwei Gruppendatenobjekte und alle Knotendaten werden der entsprechenden Gruppe zugewiesen.

In diesem Fall wird jede Gruppenvorlage als Singleton verwendet, aber Ihre Anforderungen führen möglicherweise dazu, dass mehrere Gruppenvorlagen verwendet werden.

Jetzt müssen Sie nur die Diagram.layout angeben, um zu steuern, wie die zwei Gruppen relativ zueinander angeordnet sind. Vielleicht wäre die einfachste ein Gridlayout zu verwenden:

myDiagram = $(go.Diagram, "myDiagramDiv", 
       { 
       initialContentAlignment: go.Spot.Center, 
       layout: $(go.GridLayout, { wrappingColumn: 1 }), 
       "undoManager.isEnabled": true 
       });

Sie können natürlich das Layout in anpassen welcher Weise auch immer Sie benötigen, ein ganz anderes oder benutzerdefiniertes Layout einschließlich der Verwendung.

Hier ist der vollständige Code. Der Kürze halber habe ich ein paar Kommentare aus dem ursprünglichen Minimal Probe entfernt:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Combining 2 Diagrams with Different Layouts</title> 
 
<!-- Copyright 1998-2016 by Northwoods Software Corporation. --> 
 
<meta charset="UTF-8"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.6.5/go.js"></script> 
 
<script id="code"> 
 
    function init() { 
 
    var $ = go.GraphObject.make; // for conciseness in defining templates 
 

 
    myDiagram = $(go.Diagram, "myDiagramDiv", 
 
        { 
 
        initialContentAlignment: go.Spot.Center, 
 
        layout: $(go.GridLayout, { wrappingColumn: 1 }), 
 
        "undoManager.isEnabled": true 
 
        }); 
 

 
    myDiagram.nodeTemplate = 
 
     $(go.Node, "Auto", 
 
     $(go.Shape, "RoundedRectangle", 
 
      new go.Binding("fill", "color")), 
 
     $(go.TextBlock, { margin: 3 }, 
 
      new go.Binding("text", "key")) 
 
    ); 
 

 
    myDiagram.groupTemplateMap.add("FD", 
 
     $(go.Group, "Auto", 
 
     { layout: $(go.ForceDirectedLayout) }, 
 
     $(go.Shape, { fill: "white", stroke: "lightgray" }), 
 
     $(go.Placeholder, { padding: 10 }) 
 
    )); 
 

 
    myDiagram.groupTemplateMap.add("LD", 
 
     $(go.Group, "Auto", 
 
     { layout: $(go.LayeredDigraphLayout) }, 
 
     $(go.Shape, { fill: "white", stroke: "lightgray" }), 
 
     $(go.Placeholder, { padding: 10 }) 
 
    )); 
 

 
    myDiagram.model = new go.GraphLinksModel(
 
    [ 
 
     { key: "FD", isGroup: true, category: "FD" }, 
 
     { key: "LD", isGroup: true, category: "LD" }, 
 
     { key: "Alpha", color: "lightblue", group: "FD" }, 
 
     { key: "Beta", color: "orange", group: "FD" }, 
 
     { key: "Gamma", color: "lightgreen", group: "FD" }, 
 
     { key: "Delta", color: "pink", group: "FD" }, 
 
     { key: "Alpha2", color: "lightblue", group: "LD" }, 
 
     { key: "Beta2", color: "orange", group: "LD" }, 
 
     { key: "Gamma2", color: "lightgreen", group: "LD" }, 
 
     { key: "Delta2", color: "pink", group: "LD" } 
 
    ], 
 
    [ 
 
     { from: "Alpha", to: "Beta" }, 
 
     { from: "Alpha", to: "Gamma" }, 
 
     { from: "Beta", to: "Beta" }, 
 
     { from: "Gamma", to: "Delta" }, 
 
     { from: "Delta", to: "Alpha" }, 
 
     { from: "Alpha2", to: "Beta2" }, 
 
     { from: "Alpha2", to: "Gamma2" }, 
 
     { from: "Beta2", to: "Beta2" }, 
 
     { from: "Gamma2", to: "Delta2" }, 
 
     { from: "Delta2", to: "Alpha2" } 
 
    ]); 
 
    } 
 
</script> 
 
</head> 
 
<body onload="init();"> 
 
<div id="sample"> 
 
    <div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:600px"></div> 
 
</div> 
 
</body> 
 
</html>

Quelle

2016-04-23 14:35:46

Verwandte Themen

 Verwandte Themen