Einführung und Tipps zur Verwendung der interaktiven Visualisierungs-JS-Bibliothek gojs

1. Einführung in Gojs

gojs ist eine JS-Bibliothek zum Erstellen interaktiver visueller Diagramme. Sie verwendet anpassbare Vorlagen und Layouts zum Erstellen komplexer Knoten, Links und Gruppen und erstellt so einfache bis komplexe Diagramme wie Flussdiagramme, Mindmaps, Organigramme, Gantt-Diagramme usw. Es bietet außerdem viele erweiterte Funktionen für die Benutzerinteraktion, wie z. B. Ziehen und Ablegen, Kopieren und Einfügen, direkte Textbearbeitung usw.

gojs ist ein Produkt von Northwoods Software. Northwoods Software wurde 1995 gegründet und ist auf interaktive Grafiksteuerelemente und -bibliotheken spezialisiert. Seine Vision besteht in der Bereitstellung hervorragender grafischer Benutzeroberflächen und mittlerweile hat es sich zu einem erstklassigen Anbieter interaktiver Diagrammkomponenten und -bibliotheken für verschiedene Plattformen entwickelt.

2. Gojs Anwendungsszenarien

Aufgrund der hohen Konstruierbarkeit von Gojs können viele Arten von Visualisierungen gezeichnet werden:

1. Flussdiagramm
2. Mindmap
3. Baumkarte
4. Gantt-Diagramm
5. Balkendiagramm
6. Kreisdiagramm
7. Karte
8. Armaturenbrett
9. Weitere Beispielbilder (Hunderte)

3. Warum Gojs wählen:

Es gibt viele Visualisierungsbibliotheken, wie z. B. Echarts, Highcharts, Antv Series, D3 und den heutigen Protagonisten Gojs usw.

Sortieren nach dem Grad der Anpassbarkeit der Zeichnung:

gojs, d3js > antv > echarts, highcharts

Wenn die Anforderungen einfach sind und keine benutzerdefinierten Diagrammelemente benötigt werden, können Sie die Bibliothek auswählen, die am besten zum Demo-Effekt passt: E-Charts oder High-Charts.

Wenn Sie die Grafikelemente bis zu einem gewissen Grad anpassen müssen, können Sie prüfen, ob die Antv G2/G6-Demo Ihren Anforderungen entspricht. Sie können die meisten Grafikelemente anpassen.

Wenn die oben genannten Optionen Ihren Anforderungen nicht entsprechen, können Sie sie in hohem Maße anpassen. Sie können d3js und gojs in Betracht ziehen oder sich zunächst die Demo ansehen, um zu sehen, welche Ihren Anforderungen am nächsten kommt, und sie dann übernehmen.

Zusammenfassung: gojs ist hochgradig anpassbar und sehr gut für komplexe Graphinteraktionen geeignet.

4. Gojs-Anleitung für den Einstieg

• Beispiele anzeigen: Beispiele

Der Zweck besteht darin, ein allgemeines Verständnis dafür zu bekommen, was Gojs leisten können, und herauszufinden und zu bestätigen, welcher Falleffekt Ihren Anforderungen am nächsten kommt. Sie können auf den Fallcode zurückgreifen, um Ihre Anforderungen zu erfüllen und mit halbem Aufwand das doppelte Ergebnis zu erzielen. Es ist auch ein sehr gutes Referenzmaterial für den Einstieg. Nachdem Sie ein oder zwei Fallcodes gelesen haben, können Sie sich auch ein grundlegendes Verständnis für die Zeichnung von Goj aneignen.

• Wichtige Konzepte

Nachdem ich den Fallcode gelesen habe, habe ich ein grundlegendes Verständnis für die Zeichnung von Goj. Es ist hilfreicher, die Zeichenkonzepte und -strukturen vor dem Zeichnen zu verstehen. Es ist, als ob Sie die Gliederung vor dem Schreiben kennen, sodass Ihre Schreibideen klarer und effizienter sind.

• Beginnen Sie mit dem Zeichnen einer einfachen Demo

• Präsenzbibliothek
• Erstellen Sie einen Gojs-Diagrammcontainer auf der Seite und legen Sie die Breite und Höhe des Containers fest, da sonst die Grafiken nicht gezeichnet werden können
• Erstellen einer Diagramminstanz
• Definieren Sie Layout, Stil, Interaktion, Eigenschaften, Ereignisse usw. (optional)
• Daten binden und Diagramme rendern

 // Diagrammcontainer <div id="myDiagramDiv" style="height:600px;width:100%;border:1px solid black"></div>
    
    // Referenz <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
    
    <Skript>
        // Eine Graphinstanz erstellen var $ = go.GraphObject.make;
        var Diagramm = neues go.Diagram("myDiagramDiv");

        // Daten binden diagram.model = new go.GraphLinksModel(
            [ // Node { Schlüssel: "Alpha", Farbe: "hellblau" },
                { Schlüssel: "Beta", Farbe: "orange" },
                { Schlüssel: "Gamma", Farbe: "hellgrün" },
                { Schlüssel: "Delta", Farbe: "pink" }
            ],
            [ // Verbindung { von: "Alpha", nach: "Beta" },
                { von: "Alpha", bis: "Gamma" },
                { von: "Beta", bis: "Beta" },
                { von: "Gamma", bis: "Delta" },
                { Von: "Delta", Bis: "Alpha" }
            ]
        );
    </Skript> 

Wenn Sie Layout, Stil, Knoten, Gruppen, Verbindungen, Ereignisse usw. steuern möchten, können Sie die entsprechende Vorlage anpassen. Im Folgenden wird der Knoten als Beispiel verwendet:

 // Die Knotenvorlage beschreibt, wie jedes Knotendiagramm erstellt wird. nodeTemplate = $(go.Node, "Auto",
        $(go.Shape, "Abgerundetes Rechteck", neues go.Binding("Füllung", "Farbe")),
        $(go.TextBlock, neues go.Binding("Text", "Schlüssel"))
    ); 

Mehr: Anleitungen, API

5. Tipps (sehr praktisch)

• Entfernen Sie das Wasserzeichen. Nachdem das Diagramm gezeichnet wurde, wird standardmäßig in der oberen linken Ecke ein Wasserzeichen mit Bibliotheksinformationen angezeigt.

Durchsuchen Sie den Quellcode der Bibliothek nach 7eba17a4ca3b1a8346 und finden Sie den Speicherort:

 a.yr=bV[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](bV,Kk,4,4);

Kommentieren oder löschen Sie den Code und ändern Sie ihn wie folgt:

 a.yr=Funktion () {return true;};

• es6 import gojs: siehe loadingGojs

Da das Wasserzeichen entfernt werden muss, muss der Quellcode der Bibliothek heruntergeladen werden. Jetzt basieren Front-End-Projekte grundsätzlich auf es6-Modulorganisationsdateien.

Daher müssen Sie go-module.js herunterladen, damit Sie es in die erforderlichen Dateien importieren können:

 importiere * als go aus „./go-module.js“;

Da go-module.js gepackt wurde, können Sie das Paket außerdem so konfigurieren, dass diese Datei vom Packen ausgeschlossen wird, um die Packzeit zu verkürzen. Am Beispiel von webpack lauten die Änderungen wie folgt:

 {
    Test: /\.js$/,
    Lader: 'babel-loader',
    einschließen: [auflösen('src'), auflösen('test')],
    + exclude: [resolve('src/assets/lib/')] //Paketbibliotheken werden in diesem Verzeichnis abgelegt}

• Blauen Rand entfernen: Klicken Sie auf das Diagramm und Sie werden sehen, dass das Diagramm einen blauen Rand hat. CSS kommt zur Rettung:

 .diagram Leinwand {
    Rand: keiner;
    Gliederung: keine;
}

Diagramm ist der Klassenname des Diagrammcontainers.

6. Übung: Implementieren eines visuellen interaktiven Diagramms der Knotengruppierungsbeziehungen

1. Voraussetzung: Die Gruppenhierarchie und die Beziehungen zwischen Knoten können korrekt dargestellt werden. Und Interaktion implementieren:
   • Wählen Sie einen einzelnen Knoten oder mehrere Knoten aus, um Knoteninformationen zu erhalten
   • Wählen Sie eine Gruppe aus, wählen Sie die Knoten in der Gruppe aus und erhalten Sie die Knoteninformationen in der Gruppe
   • Wählen Sie einen Knoten aus. Der aktuelle Knoten wird als Stammknoten betrachtet. Alle mit dem Stammknoten verbundenen Knoten können ausgewählt und Knoteninformationen abgerufen werden.
2. Vom Backend bezogene Schnittstellendaten:

Schnittstellendaten

 const Daten = {
  		"Eigenschaften": [
  			{ "key": "t-2272", "parentKey": "j-1051", "name": "Schlüssel" },
  			{ "Schlüssel": "p-344", "übergeordneterSchlüssel": "g--1586357764", "Name": "Test" },
  			{ "Schlüssel": "t-2271", "übergeordneterSchlüssel": "j-1051", "Name": "Abfrage" },
  			{ "Schlüssel": "t-2275", "übergeordneterSchlüssel": "j-1052", "Name": "Glücklich" },
  			{ "key": "j-1054", "parentKey": "p-344", "name": "Schlüssel" },
  			{ "Schlüssel": "t-2274", "übergeordneterSchlüssel": "j-1052", "Name": "Abfrage" },
  			{ "Schlüssel": "j-1051", "übergeordneterSchlüssel": "p-444", "Name": "hallo" },
  			{ "key": "j-1052", "parentKey": "p-444", "name": "Bearbeiten" },
  			{ "Schlüssel": "t-2281", "übergeordneterSchlüssel": "j-1054", "Name": "Schlüssel" },
  			{ "Schlüssel": "p-444", "übergeordneterSchlüssel": "g--1586357624", "Name": "Test" },
  			{ "key": "g--1586357624", "name": "Datengruppe 1" },
  			{ "key": "g--1586357764", "name": "Datengruppe 2" },
  			{ "Schlüssel": "t-2273", "übergeordneterSchlüssel": "j-1051", "Name": "Neu" }
  		],
  		"Abhängigkeiten": [
  			{ "sourceKey": "t-2272", "targetKey": "t-2274" },
  			{ "sourceKey": "t-2274", "targetKey": "t-2275" },
  			{ "sourceKey": "t-2273", "targetKey": "t-2272" },
  			{ "sourceKey": "t-2271", "targetKey": "t-2272" },
  			{ "sourceKey": "t-2272", "targetKey": "t-2281" }
  		]
  	}

1. Siehe gojs demo: Gruppierung, Navigation

endlich

Ich werde beim nächsten Mal die Idee teilen, wie der Effekt erreicht werden kann. Wenn Sie interessiert sind, können Sie die Daten verwenden, auf die Demo verweisen und das in diesem Artikel geteilte Wissen nutzen, um es selbst umzusetzen.

Ich habe auch als Anfänger angefangen (ich hatte noch nie zuvor Gojs verwendet) und schließlich den Effekt erzielt. Wenn dieser Artikel Mängel oder Fehler enthält oder Sie gute Vorschläge haben, weisen Sie bitte darauf hin.

Vielen Dank! ! !

Damit schließen wir diesen Artikel zur Verwendung und den Techniken der interaktiven Visualisierungs-JS-Bibliothek gojs ab. Ich hoffe, dass es für jedermanns Studium hilfreich sein wird, und ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.