Auf der Suche nach effizienten Graphen-Visualisierungsframeworks für großformatige Renderings stießen wir auf 3d-force-graph, einen wirklich sauberen Wrapper von Three.js für die Graphen-Visualisierung. Schauen Sie sich das Repository an, nachdem Sie es gelesen haben, es gibt viele weitere Beispiele und Einstellungen, die es zu erkunden gilt.
Uns ist Three.js schon länger ein Begriff und wir waren beeindruckt, insbesondere von den 3D- und WebGL-Funktionen. Wir haben vor Jahren eine Grafikvisualisierung mit Three.js gesehen und nachgebaut. 3D-Force-Graph-Pakete lassen sich gut mit einer Grafik-API kombinieren und bieten nützliche Optionen, um schnell ansprechende Ergebnisse zu erzielen.
Zugriff auf die Daten.
Wie wir im ersten Artikel dieser Serie dargelegt haben, kann Neo4js Cypher über das binäre Bolt-Protokoll bis zu 1 Million Datensätze pro Sekunde über das Kabel übertragen, genug, um unsere Grafikvisualisierung interaktiv mit genügend Daten zu versorgen. In unseren Experimenten verwenden wir erneut den Neo4j JavaScript-Treiber, um den Graphen nach Daten abzufragen und im 3D-Graphen zu rendern.
Bitte beachten Sie, dass der JS-Treiber ein benutzerdefiniertes Number-Objekt verwendet, das wir in JS-Ganzzahlen mit value.toNumber () umgewandeln müssen.
Die folgenden interaktiven Seiten laden 5.000 Beziehungen aus Ihrem Diagramm unter bolt://localhost. Möglicherweise müssen Sie auth festlegen (Standard ist user: neo4j, password: test).
Basic Loading.
Beim Basic Loading werden hier nur die Node-IDs verwendet, da dies der schnellste Weg ist, die Diagrammstruktur zu extrahieren.
Laden der Relationsship list
Wir laden diese Daten mit dem JavaScript-Treiber wie zuvor demonstriert und transformieren sie in eine Datenstruktur in gDatathat 3d-force-graph unterstands.
Wir benötigen ein Array mit Links von einer Quell-ID zu einer Ziel-ID und ein Array für Nodes, die unsere zu rendernden Daten enthalten. Im ersten Beispiel sind das nur die IDs. Wir berechnen diese IDs aus dem einzigartigen Satz von Quell- und Ziel-IDs unserer Relationsship List.
Dann müssen wir das nur nutzen, um unsere 3D-Grafik zu initialisieren.
Inkrementelles Loading.
Beim inkrementellen Loading können wir jede Zeile aus dem Abfrageergebnis dem Diagramm hinzufügen, sobald es ankommt. Besonders bei großen Ergebnissen, die die Reaktionsfähigkeit der Visualisierung verbessern und den User sofort Feedback geben, mit dem er interagieren kann. Außerdem macht es Spaß zu sehen, wie die neuen Nodes und Beziehungen entstehen.
Der Hauptunterschied besteht darin, dass wir jetzt die 3D-Grafik im Voraus erstellen und anschließend ihre graphData mit jeder ankommenden Zeile aktualisieren und unsere neuen Einträge mit dem Array Spread Operator hinzufügen.
Dies lässt sich am besten in Aktion zeigen, also testen Sie es unten.
Farbe und Beschriftung.
Natürlich regt ein sanfter Graph niemanden an, also lassen Sie uns etwas Farbe und Informationen zeigen. Das erfordert, dass wir diese Informationen für die Nodes bereitstellen, so dass wir neben der ID auch ein Label für die Einfärbung und eine Beschriftung für jeden Node zur Verfügung stellen. Farbe nach Label und Textbeschriftung beim Hover.
Glücklicherweise kommt 3d-force-graph mit einer Handoption für die automatische Einfärbung basierend auf einem Attribut, so dass wir keine Farben oder Paletten manuell bearbeiten müssen. Für die Beschriftung stellen wir nur Text zur Verfügung, der im nodeLabel Callback dargestellt werden soll, und für Feedback ändern wir auch den Cursor, während wir mit der Maus über einen Node fahren.
Diesmal verwenden wir die Paradise Paper als Beispiel, da sie mehr verschiedene Bezeichnungen (fünf) haben als der Interaktionsgraph Game of Thrones. Was sich in der 3D-Visualisierung schnell zeigt, sind die Cluster, die sich um Offiziere (Personen in Führungspositionen für Shell-Unternehmen) und Vermittler (Anwaltskanzleien und Banken, die Shell-Unternehmen gründen) bilden.
Gewichte für Node- und Beziehungsgrößen.
Nachdem ein Graph-Algorithmus wie PageRank auf unseren Daten ausgeführt wurde, enthalten die Nodes einen Rangwert als Gewicht. Die Beziehungen des GoT-Diagramms hatten bereits Interaktionsgewichte, die wir nun zusätzlich zu Farben und Bildunterschriften darstellen können.
Wir wollen auch Beziehungen nach Typ einfärben. Wir verwenden log (weight) für Beziehungen, da sie sonst zu dick werden würden.
So kehren wir anschließend als Zusatzinformation aus unserer Grafikabfrage zurück.
Wir verwenden das Attribut size für Nodes mit der nodeVal-Methode und die Gewichtung auf Beziehungen mit den linkWidthmethods. Zur Einfärbung des Beziehungstyps rufen wir linkAutoColorBy auf.
Als zusätzliches, ausgefallenes Feature ersetzen wir stattdessen die festen Beziehungen durch einen Partikelstrom, wodurch sie weniger störend wirken.
In diesem Fall verwenden wir die ursprüngliche Gewichtseigenschaft (not log(weight)), da sie die Anzahl der Interaktionen repräsentiert, d.h. die Anzahl der Partikel, die zwischen den beiden Zeichen wandern.
Somit sind wir mit unserem heutigen Tutorial soweit durch.
Vielen Dank für Ihren Besuch.
Leave A Comment