Zurück zum Blog

Erstellen von Diagrammen mit React, SVG und CSS-Layout

Blogvorlage 44
Rescale Engineering

KennethBlogImage
Dieser Artikel zeigt unseren Prozess der Diagrammerstellung mit Reagieren, SVGund Facebooks CSS-Layout Bibliothek. Bei Neu skalierenWir stellen unseren Kunden eine Web-Benutzeroberfläche zur Verfügung, mit der sie einen Lizenzproxyserver für die Kommunikation zwischen unseren Rechenknoten und ihren lokalen Lizenzservern einrichten können. Ein Diagramm zeigt unseren Benutzern, wie diese Server miteinander kommunizieren.
Hier ist ein Beispiel des Diagramms, das wir mit dieser Technik erstellt haben. Die Steuerelemente dienen lediglich dazu, zu zeigen, dass React das Diagramm bei Statusänderungen neu rendern kann.
BbGuHsj
SVG eignet sich gut für die Erstellung von Diagrammen in React, da es Teil des DOM ist. Das Layout von SVG-Elementen ist jedoch nicht so einfach wie die Verwendung von CSS mit HTML, da SVG ein eigenes Koordinatensystem verwendet. Hier kommt Facebooks CSS-Layout kommt ins Spiel. Es ermöglicht uns die Verwendung von CSS Flexbox Modell zum Layout unserer SVG-Elemente.
Mit React, SVG und CSS-Layout können wir:

  • Dynamisches Ändern des Diagramms aufgrund von Änderungen der Eigenschaften oder des Zustands einer Komponente
  • Schnelle Iteration bei Anforderungsänderungen
  • Lokalisieren Sie in andere Sprachen mithilfe unserer bestehenden Methode zur Lokalisierung der Benutzeroberfläche

Wireframing

Um mit der Erstellung des Diagramms zu beginnen, erstellen wir ein Drahtmodell mit HTML und den Standardstile, wie sie in den CSS-Layouts geschrieben sind. README:

div, span { Boxgröße: Rahmenbox; Position: relativ; Anzeige: Flex; Flexrichtung: Spalte; Elemente ausrichten: strecken; Flexschrumpfen: 0; Inhalt ausrichten: Flexstart; Rahmen: 0 durchgehend schwarz; Rand: 0; Polsterung: 0; }

Das Drahtmodell des Diagramms in HTML sieht folgendermaßen aus:

Neu skalieren
Berechnen
Lizenz-Proxy
On-Premise
Lizenzserver 1
Lizenzserver 2
 

Dies führt zu:
JvRDq5B
Um die Grenzen der einzelnen Divs zu verdeutlichen, wurden ihnen Rahmen hinzugefügt. Beachten Sie Folgendes:

  • Wir sollten nur CSS-Layouts verwenden Unterstützte Attribute.
  • Das Positionieren von Text in SVG wird weiterhin ein teilweise manueller Prozess sein, insbesondere die vertikale Zentrierung.

Erstellen des CSS-Layoutbaums aus dem Drahtmodell

Im CSS-Layout ist ein Knoten nur ein Objekt mit { Stil: { … }, Kinder: [ Knoten ] }. Der Wurzelknoten wird als Baum betrachtet. Laufen computeLayout() im Baum füllt alle Knoten mit einem Layoutobjekt, das Breite, Höhe, oben, links, rechts und unten enthält. Dies verwenden wir, um die SVG-Elemente zu positionieren.
Das Erstellen des Baums aus dem Drahtmodell ist nur ein einfaches Auslesen des HTML und der IDs werden jedem Knoten gegeben, damit wir auf die Layout Eigenschaft jedes Knotens nach ID später.

const computeLayout = require('css-layout'); const range = require('lodash/utility/range'); Funktion em(n) { return n * 12; } const numServers = 2; const nodeTree = { id: 'root', Stil: { alignItems: 'center' }, untergeordnete Elemente: [ { id: 'rescaleBox', Stil: { padding: em(1), width: em(12) }, untergeordnete Elemente: [ { id: 'rescaleLabel', Stil: { height: em(1) } }, { id: 'computeNodes', Stil: { height: em(3), marginBottom: em(2), marginTop: em(1) }, }, { id: 'licenseProxy', Stil: { height: em(3) } }, ], }, { id: 'onPremiseBox', Stil: { marginTop: em(3), }, untergeordnete Elemente: [ { id: 'onPremiseLabel', Stil: { height: em(1), margin: em(1) } }, { id: 'onPremiseServers', Stil: { flexDirection: „Zeile“, Rand unten: em(1), Polsterung links: em(0.5), Polsterung rechts: em(0.5), }, untergeordnete Elemente: Bereich(0, AnzahlServer).map(i => { return { id: `server${i}`, Stil: { Höhe: em(6), Rand links: em(0.5), Rand rechts: em(0.5), Breite: em(8), }, }; }), }, ], }, ], }; computeLayout(nodeTree);

Rendern mit React

Wir haben jeden unserer Knoten mit dem Layout Eigentum. Diese Layout Objekte, auf die zugegriffen werden kann durch id ist ziemlich einfach:

Funktion createLayoutMap(obj, map={}) { wenn (obj.id) { map[obj.id] = obj.layout; } wenn (obj.children) { für (lass i = 0; i < obj.children.length; i++) { createLayoutMap(obj.children[i], map); } } return map; } const l = createLayoutMap(nodeTree);

Das l Das Objekt enthält alle Layoutinformationen, die über die jedem Knoten zugewiesene ID zugänglich sind. Damit können wir nun eine Kombination aus , und So rendern Sie das Diagramm in React:

render() { // ... all das andere Zeug oben ... const l = createLayoutMap(nodeTree); return ( {gettext('Rescale')} {gettext('Compute Nodes')} {gettext('License Proxy')} {licenseProxyIp} // ... und so weiter, der Rest bleibt dem Leser als Übung überlassen ); }

Wie Sie sehen können, verwenden wir die Layout Eigenschaften, die von CSS-Layout berechnet werden, um die Elemente zu positionieren oder ihre Breite und Höhe festzulegen. Zu beachten:

  • Das Obenverladearme, Recht, Boden und links Eigenschaften in der Layout Objekte sind relativ zu ihrem übergeordneten Knoten. In SVG verwenden wir damit jedes Kind der Das Element wird relativ zu dieser Transformation positioniert.
  • Die Positionierung des Textes erfolgt, wie oben erwähnt, teilweise manuell. textAnchor Eigenschaft kann horizontale Zentrierung handhaben, aber wir müssen die dy Eigenschaft mit einigen magischen Zahlen zur Handhabung der vertikalen Zentrierung.

Diese Technik wurde inspiriert von diesem Blog-Post das CSS-Layout zum Layouten von D3-Diagrammen verwendet.

Autorin

×