- . , visx . , .
- , . visx, , CSS-in-JS-. , React- , , , , , . Visx, , . , .
- Dies ist keine Sammlung von Elementen, die für die Erstellung von Diagrammen "geschärft" wurden. Wenn Sie Visualisierungsprimitive verwenden, um Diagramme zu erstellen, erstellen Sie schließlich Ihre eigene Bibliothek, die dieses Problem löst. Darüber hinaus wird es eine Bibliothek sein, die für Ihre Bedürfnisse optimiert ist. Sie wird unter Ihrer vollständigen Kontrolle sein.
Die wichtigste Stärke von visx ist, dass es sich im Wesentlichen um einen regulären Satz von React-Komponenten handelt. Wenn Sie wissen, wie Sie mit der React-Bibliothek arbeiten, können Sie mit visx Visualisierungen erstellen. Es verwendet Standard-APIs und -Muster, die React-Entwicklern bekannt sind. In jedem React-Projekt sollte sich visx wie zu Hause fühlen. Wir sind sehr daran interessiert zu sehen, was Sie mit visx erstellen!
Herausforderung: Datenvisualisierung in der Frontend-Entwicklung
Die Datenvisualisierung wird von Spezialisten aus verschiedenen Bereichen benötigt. Aus diesem Grund müssen Frameworks zum Erstellen grafischer Elemente vorhanden sein. Solche Rahmenbedingungen, die die Probleme dieser Menschen lösen können. Die Art, die diese Leute wirklich beherrschen können.
Eine solche Gruppe sind Front-End-Entwickler, die ständig Datenvisualisierungen für Webprojekte erstellen müssen. Es gibt unzählige großartige Bibliotheken und Frameworks zum Erstellen von Webgrafiken. Von D3 , Highcharts , Plotly , Echarts , Victory , G2 , Recharts , React -Vis , Vega ,vega-lite , zu semiotischen und ähnlichen Projekten. Trotz dieser Vielfalt haben wir über ein Dutzend vorhandene Bibliotheken analysiert und in Betracht gezogen, sie auf Airbnb zu verwenden. Dabei haben wir festgestellt, dass die meisten von ihnen Mängel in mindestens einem von drei Bereichen aufweisen, die für unsere Front-End-Entwickler wichtig sind:
- ( ?). - . API D3 vega. , -.
- ( , ?). , ? ( — airbnb.com), . ? .
- . -, , -, , airbnb.com, . , , , , , .
Es wurde festgestellt, dass häufig ein direkter Zusammenhang zwischen der Ausdruckskraft von Datenvisualisierungstools und der Fähigkeit besteht, diese schnell zu erkunden. Je besser eine dieser Eigenschaften ist, desto schlechter kann die andere sein. All dies führte uns zu der Frage, wie eine Bibliothek erstellt werden kann, die schnell erkundet werden kann, eine Bibliothek, die ausdrucksstark genug ist und gleichzeitig eine hohe Leistung bietet. Die Antwort auf diese Frage besteht aus einem Wort: "Reagieren".
Lösung: visuelle Grundelemente auf niedriger Ebene basierend auf React
In den letzten Jahren hat sich die React-Bibliothek zum Mainstream der Webentwicklung entwickelt. Dies ist teilweise auf die Tatsache zurückzuführen, dass deklarative APIs vorhanden sind, mit denen Sie sauberen, lesbaren Code schreiben können, der einfach zu warten ist. Diese Bibliothek ist vielen Front-End-Entwicklern bekannt. Es gibt viel Material zur Optimierung der Leistung von React-Anwendungen. Wir haben das React-Projekt und das Ökosystem dieser Bibliothek basiert, was bedeutet, dass wir es einfach zu erlernen und produktiv gemacht haben. Die Implementierung einer einfachen modularen API wurde zum Schlüssel für ihre Ausdruckskraft.
Wenn wir über diese Vision dieses Projekts sprechen, werden uns normalerweise zwei Fragen gestellt.
Hier ist der erste: "Warum nicht einfach D3 verwenden, eine sehr ausdrucksstarke Bibliothek in Ihren React-Anwendungen?"
Der Punkt ist, dass Sie das tun können. Da sowohl D3 als auch React das DOM im Alleingang manipulieren möchten, haben wir festgestellt, dass es am besten ist, wenn D3 nur zur Berechnung und React für DOM verwendet wird. Andernfalls öffnen zwei mentale Modelle, die um die Aktualisierung des DOM konkurrieren, die Tür für Fehler, die das Projekt infiltrieren. Die Verwendung von D3 nur für Berechnungen bedeutet jedoch, dass ein großer Teil der Funktionalität dieser Bibliothek (die sich auf das DOM bezieht) nicht verwendet wird. Es geht um Auswahl . Verbinden , Zoomen , Ziehen , Pinseln und Übergänge... Wie bereits erwähnt, dauert die Beherrschung von D3 einige Zeit. Wir möchten, dass Entwickler das Gefühl haben, nativen React-Code zu schreiben, wenn sie Datenvisualisierungen durchführen, die Standard-APIs und vertraute Muster verwenden.
Hier ist die zweite Frage: Warum nicht einfach eine der vielen Rendering-Bibliotheken verwenden, die für React erstellt wurden?
Unsere Untersuchungen (die Ergebnisse sind in der folgenden Abbildung dargestellt) haben gezeigt, dass vorhandene React-Bibliotheken für die Datenvisualisierung häufig Abstraktionen auf hoher Ebene sind und für eine einfache Verwendung optimiert sind (dh auf die Reduzierung der für ihre Verwendung erforderlichen Codemenge ausgerichtet sind). Dies geschieht auf Kosten ihrer Ausdruckskraft. Keiner von ihnen bietet dem Entwickler die Ausdruckskraft von D3-Grundelementen, und viele erlauben nicht die Optimierung, die wir für Produktionsprojekte benötigen, da Berechnung, Animation, Statusverwaltung, Stile und Rendering eng miteinander verbunden sind.
- , , . visx , React-
Durch die Analyse des in der vorherigen Abbildung dargestellten Problembereichs sehen Sie deutlich die Chance für die erfolgreiche Entwicklung einer React-Bibliothek mit einem hohen Maß an Ausdruckskraft. Durch die Erstellung von Rendering-Grundelementen auf niedriger Ebene, die von Grund auf für die Verwendung gängiger React-APIs entwickelt wurden, hofften wir, eine Bibliothek erstellen zu können, die leicht zu erlernen, ausdrucksstark und leistungsstark ist. Wir dachten, eine solche Bibliothek wäre für jeden Front-End-Entwickler nützlich. So wurde das visx-Projekt geboren.
Details zu visx
Die visx-Komponentensammlung (früher als vx bekannt) verbirgt die Wörter "Visualisierungskomponenten" in ihrem Namen. Es besteht aus über 30 separaten Paketen mit Reaktivdaten-Visualisierungsprimitiven, die in mehrere Kategorien unterteilt sind (siehe folgende Abbildung). Wer diese Grundelemente verwendet, wird nicht zu einer Art Anwendungsstatus-Verwaltungsschema gezwungen. Der Entwickler kann den Ansatz für die Animation von Elementen und deren Gestaltung wählen. Dies alles bedeutet, dass visx-Grundelemente in jede reaktbasierte Codebasis integriert werden können. Und die Tatsache, dass beim Erstellen von visx ein Schwerpunkt auf Modularität gelegt wurde (dies macht visx ähnlich wie D3), ermöglicht es Ihnen, Bündel von Anwendungen mit kompakter Größe zu erstellen, einschließlich in ihrer Zusammensetzung nur das, was zur Implementierung Ihrer eigenen Bibliothek für die Datenvisualisierung zur wiederverwendbaren Verwendung erforderlich ist, oder ,Was wird benötigt, um einen eindeutigen Zeitplan zu erstellen, der in einer einzelnen Kopie vorhanden ist?
Visx ist eine modulare Sammlung von über 30 Paketen, die allgemeine Datenvisualisierungsaufgaben in React-Anwendungen behandeln.
Fragen und Antworten
▍Wie wird D3 in Visx verwendet?
Einige der in visx enthaltenen Pakete verwenden D3, um verschiedene Berechnungen durchzuführen, z. B. die Platzierung von Elementen auf Seiten. Sie duplizieren die von ihnen verwendeten D3-Pakete funktional und statten sie mit deklarativen React-APIs aus. Beispiele für solche Pakete sind @ visx / axis, @ visx / geo, @ visx / hierarchy und @ visx / shape. Andere Pakete ersetzen die DOM-Verwaltungsfunktionen von D3 und bieten dem Entwickler React-Grundelemente für die Interaktion mit Elementen. Dies sind beispielsweise @ visx / pinsel, @ visx / drag und @ visx / zoom.
▍Was kann Visx, was D3 nicht kann?
Viele Pakete haben nichts mit D3 zu tun. Sie abstrahieren die Lösungen für häufig auftretende Probleme, mit denen wir beim Erstellen von Design-Layouts in React konfrontiert waren, die Layouts pixelgenau wiedergeben. Viele dieser Tools abstrahieren und vereinfachen komplexe Probleme bei der Objektgröße und vereinfachen die SVG-API. Hier sind einige Beispiele.
@ visx / tooltip
Hier ist ein interaktives Beispiel.
QuickInfos
QuickInfos sind ein Element, das häufig in Webprojekten verwendet wird. Es ist jedoch keine leichte Aufgabe, alle Mikrointeraktionen mit solchen Elementen zu realisieren. Das @ visx / tooltip-Paket abstrahiert die Tooltip-Statusverwaltung. Es hilft, seinen Inhalt, seine Koordinaten zu verwalten, ihn ein- und auszublenden. Dies erfolgt mithilfe von React-Hooks (useTooltip) und einer Komponente höherer Ordnung (withTooltip). Die Verwendung des Pakets @ visx / tooltip vereinfacht auch Aufgaben im Zusammenhang mit dem Rendern von Tooltips, z. B. die automatische Positionierung (daher wird der Tooltip nicht von seinem Container abgeschnitten) und das optionale Rendern innerhalb des Portals.zur Behebung von Problemen mit kontextbezogenen Überlagerungen
@ visx / text
Ein interaktives Beispiel finden Sie hier .
Arbeiten mit Text
in SVG 1.1. Es gibt keine Möglichkeiten, mit mehrzeiligem Text zu arbeiten, ähnlich wie in HTML, wo Sie beispielsweise mithilfe von CSS problemlos eine mehrzeilige Darstellung von Langtexten implementieren können. Das Implementieren solcher Mechanismen in React (oder sogar in reinem JavaScript) erfordert normalerweise das Rendern unsichtbarer DOM-Elemente, die zum Messen der Textgröße und zum Auffinden von Parametern zum Aufteilen von Text in Zeilen verwendet werden. Das @ visx / text-Paket abstrahiert alle diese Aufgaben und erleichtert die Unterstützung von Langtexten in Visualisierungen.
@ visx / responsive
Hier ist ein interaktives Beispiel.
Responsive Webanwendung
Responsive Webanwendungen lassen sich einfach mit HTML erstellen. Wenn Diagramme basierend auf SVG-Grafiken und den Funktionen des Canvas-Elements erstellt werden, müssen Pixelgenauigkeitsmessungen durchgeführt werden, damit sie reagieren, was in React nicht so einfach ist. Das @ visx / responsive-Paket bietet Entwicklern viele Hilfsprogramme, mit denen sich die Pixelabmessungen von Elementen leicht ermitteln lassen, sodass Sie problemlos responsive Diagramme erstellen können.
@ visx / gradient, @ visx / pattern
Hier ist ein interaktives Beispiel.
Verläufe und Muster
Farbverläufe und Muster füllt stark die Fähigkeiten derer , die Design - Charts verbessern. Mit diesen Grafikeffekten können Sie auffällige Bilder erstellen, die sich vom Hintergrund abheben. Die Beschreibung solcher Bilder mit SVG erfordert jedoch viel Code und kann eine entmutigende Aufgabe sein. Die Pakete @ visx / gradient und @ visx / pattern vereinfachen die Syntax für die Deklaration der entsprechenden Stile erheblich und ermöglichen es jedem, niedliche Diagramme zu erstellen.
▍Was kann mit visx erstellt werden?
Wir verwenden visx seit 2,5 Jahren und verwenden diese Sammlung von Elementen in Dutzenden interner Datentools und auf airbnb.com.
Mit visx erstellte Visualisierungen
Die vorherige Abbildung zeigt Beispiele für das, was wir mit visx erstellt haben. Wenn Sie im Uhrzeigersinn von der oberen linken Ecke aus gehen, sind dies die folgenden Projekte: Gantt-Diagramm mit Abhängigkeiten, Organigrammdiagramm, Radialdiagramm, Geschäftsmetrikbericht, Übersicht über die Serviceinteraktion.
Wir haben visx auch verwendet, um eine übergeordnete Bibliothek zum Erstellen wiederverwendbarer Diagramme zu erstellen. Dies ermöglichte es uns, die Menge an Boilerplate-Code beim Generieren einfacher grafischer Elemente zu reduzieren.
Visx ist eine Sammlung von Elementen auf niedriger Ebene. Es ist für die Schaffung übergeordneter Systeme auf seiner Basis konzipiert. Es sollte verwendet werden, um Ihre eigenen Bibliotheken auf hoher Ebene zu erstellen und benutzerdefinierte Visualisierungen für Webanwendungen zu erstellen.
▍Visx sieht interessant aus, aber was ist, wenn ich D3 wirklich mag?
Wir lieben auch D3!
▍Wie entwickelt sich Visx?
Für 3 Jahre Arbeit an Visx haben wir diese Sammlung von Primitiven in den folgenden drei Richtungen entwickelt:
- . , visx, - Airbnb, ( — , , ) , ( , ). , , , , , .
- . , visx, , , . , vx, . visx, blocks.org, CodeSandbox, , , visx.
- . visx JavaScript-, TypeScript. . TypeScript — - Airbnb. , TypeScript, — ts-migrate. , , visx . , Happo, visx, .
In der visx-Dokumentation werden Beispiele im Blocks.org-Stil verwendet, mit denen Sie auf der CodeSandbox-Plattform experimentieren können. Alle Beispiele sind eng mit den entsprechenden Sammlungspaketen verwandt.
Haben Sie visx verwendet?