Jedes Mal, wenn ich an einem Projekt mit Visualisierungen arbeite, reagieren Projektmanager normalerweise entsetzt, wenn ich sage, dass ich D3 nicht verwende. Warum gibt es Bedenken? Warum sollte ich D3 nicht verwenden?
Bei der Beantwortung dieser Fragen müssen wir den Kontext verstehen, in dem D3 erstellt wurde., D3 wurde erstmals 2011 veröffentlicht und war zu dieser Zeit ziemlich innovativ.
Normalerweise würden Sie Bibliotheken sehen, die standardmäßig Diagramme mit einer umfangreichen Liste von Optionen bereitstellen. Dies kann funktionieren, aber das Problem ist, dass jedes Mal, wenn jemand eine neue Anforderung hat, eine Option hinzugefügt und unterstützt werden muss. Schließlich enden Sie mit einer Sprache, in der Sie mehrere Objekte verwenden, um ein Diagramm zu definieren. D3 hat einen anderen Ansatz gewählt, anstatt Ihnen die vollständigen Komponenten zu geben, bietet es Ihnen datengesteuerte Hilfsfunktionen, um diese Komponenten selbst zu erstellen.,
Zu dieser Zeit waren Bibliotheken wie jQuery und Backbone beliebt. Das Erstellen eigener Diagramme mit diesen Bibliotheken wäre eine Herausforderung gewesen, insbesondere wenn Sie möchten, dass sie dynamisch sind. Browser haben gerade erst neue moderne CSS-Standards wie Übergänge übernommen, und modernere Eigenschaften wie Flex Box waren noch lange nicht implementiert.
D3 löste viele dieser Probleme, und es war zweifellos der einfachste Ansatz zur Implementierung von Visualisierungen zu der Zeit. Seitdem hat sich jedoch viel geändert., Wir haben neue moderne Frameworks, die flexiblere und ausdrucksstärkere Konzepte wie virtuelles DOM verwenden, und CSS verfügt über so viele neue Funktionen für Layout und Animationen.
Anstatt automatisch zu D3 zu springen, lassen Sie mich einige Gründe auflisten, warum Sie Ihre Verwendung überdenken sollten.
Ich habe in den letzten Jahren mehrfach mit D3 gearbeitet und alle möglichen Visualisierungen damit implementiert. Ich verstehe die allgemeinen Konzepte über D3 und habe immer noch Schwierigkeiten, damit zu arbeiten. Jeder, mit dem ich gearbeitet habe, von Junioren bis hin zu Senior-Entwicklern, hat auch damit zu kämpfen., Was viele Leute, einschließlich ich, tun, ist, dass wir online ein Beispiel finden, das ungefähr dem entspricht, wonach wir suchen, und das Beispiel an unsere Bedürfnisse anpassen.
Wenn wir einige benutzerdefinierte Funktionen hinzufügen möchten, werden wir wahrscheinlich noch mehr suchen und etwas finden, das korrekt aussieht, versuchen zu verstehen, wie es funktioniert, und es weiter ändern, bis es das tut, was wir wollen es tun.
Klingt das vertraut? Auf der anderen Seite sind Entwickler heutzutage sehr vertraut mit virtuellen DOM-Bibliotheken und sie sind vertraut mit Templating., Macht es nicht Sinn, diese Fähigkeiten zu nutzen, anstatt eine Bibliothek einzuführen, die eine ganz andere Denkweise erfordert?
Es ist einfacher als Sie denken
Wenn Sie zum ersten Mal daran denken, Ihre eigenen Diagramme von Grund auf neu zu erstellen, ist es üblich, sich besorgt und verängstigt zu fühlen. Es mag wie eine sehr komplizierte Komponente klingen, aber es ist wirklich nicht, wenn Sie es brechen. Nehmen wir ein Beispiel für ein Liniendiagramm. So würden Sie ein Liniendiagramm in D3 erstellen:
Quelle: bl.Herden.,org
So würde ich so etwas mit Preact:
Und CSS:
Source: JSFiddle
Es gibt ziemlich viel Code, aber ich verwende nur die Tools, die mir bereits zur Verfügung stehen, in diesem Fall meine Ansichtsbibliothek, die Preact ist (kann jedoch alles sein, Reagieren, Vue, Angular usw.) und moderne CSS-Tools wie flexbox.,
Das D3-Beispiel erfordert das Erlernen vieler Konzepte zu D3. Letzteres erfordert nur Kenntnisse, die Sie bereits über Ihre Ansichtsbibliothek haben. Ich würde argumentieren, dass es einfacher zu warten ist als das D3-Beispiel, da jeder, der die Ansichtsbibliothek kennt, in die Codebasis springen und Änderungen vornehmen kann.
Vergessen Sie nicht die Bündelgröße
Abhängig von der Art des Diagramms und davon, wie viel Baumschütteln Ihr Bündel optimieren kann, importiert D3 im schlimmsten Fall mehr als 70 KB Code. Dies kann Auswirkungen auf das Laden Ihrer Website haben., Es stimmt also, dass Sie mehr Code schreiben als das ursprüngliche D3-Beispiel, aber insgesamt verteilen Sie weniger Code als wenn Sie D3 verwendet hätten.
Im Allgemeinen ist es bei der Verwendung von Code von Drittanbietern immer wichtig, sich an die Kosten für die Verwendung dieses Codes zu erinnern. Wenn Sie nur eine einzelne Funktion aus einer Bibliothek benötigen, würden Sie die gesamte Bibliothek für diese Funktionalität importieren?, Ja, Sie sollten das Rad nicht immer neu erfinden, aber Sie müssen die Zeit berücksichtigen, um diese Bibliothek zu lernen, die Größe, die sie Ihrem Bundle hinzufügt, die Lizenz dieser Bibliothek, die Unterstützung, die diese Bibliothek haben wird, die Vertrauenswürdigkeit der Betreuer, die Fähigkeit, Fehler rechtzeitig zu beheben usw.
Canvas und HTML sind oft besser als SVG
Wenn Sie im Beispiel früher bemerkt haben, haben wir eine Kombination aus HTML und SVG verwendet. Aus irgendeinem Grund werden die Leute versuchen, ganze Diagramme mit SVGs zu implementieren, aber das ist wirklich nicht nötig. CSS ist heutzutage weitaus leistungsfähiger als SVG.,
Zum Beispiel unterstützt SVG den Textumbruch nicht nativ. Wenn wir Textumbruch machen wollten, müssten wir es in JavaScript berechnen:
Quelle: bl.ocks.org
Mit HTML auf der anderen Seite, solange white-space ist auf normal, es wird nur natürlich wickeln.
Elemente wie Kreise und Rechtecke können in HTML und CSS erfolgen. Sie können transform und border-radius, um alle Arten von Formen zu erstellen., Wenn Sie ein Balkendiagramm in D3 mit zwei abgerundeten Ecken erstellen möchten, können Sie rect nicht verwenden, da es alle vier Ecken anstelle der beiden Ecken abrundet. Ihre einzige option wäre die Verwendung von path.
Der einzige Grund, warum ich SVG-Tags verwenden würde, ist das path – Tag. Es ist immer noch die einzige saubere Möglichkeit, beliebige Formen ohne HTML-Äquivalent zu erstellen.
Wenn Sie zusätzliche Leistung benötigen, müssen Sie auch das canvas – Tag berücksichtigen., Mit Canvas müssen Sie grundlegende Interaktionen selbst codieren, aber es hat den Vorteil, dass Sie nicht den Overhead von HTML oder SVG haben, der Speicher verbrauchen und langsamer aktualisiert werden kann. Sie können die einzelnen Pixel auf der Leinwand beliebig aktualisieren, um Ihre Visualisierung zu optimieren und zu skalieren. Neue Browser-APIs wie OffscreenCanvas helfen auch, die Leistung zu steigern, wenn sie in Workers verwendet werden.
Aber Canvas skaliert nicht wie SVG?,
Eine sehr häufige Sache, die ich schon oft gehört habe, ist, dass Canvas nicht für Visualisierungen geeignet ist, da es nicht so gut skaliert wie SVG. Wenn Sie bei normaler Verwendung von Canvas eine Seite vergrößern oder verkleinern oder einen Browser mit einer höheren DPI-Anzeige verwenden, wird Ihre Canvas bei normaler Verwendung von Canvas pixelig und verschwommen.
Dies geschieht, weil Sie beim Erstellen Ihrer Leinwand definieren müssen, mit wie vielen Pixeln Ihre Leinwand zeichnen soll., Wenn wir die Attribute width und height, sieht es möglicherweise so aus, als würden wir die CSS-Größe festlegen, aber wir setzen tatsächlich die Größe des Zeichnungsbereichs für die Leinwand. Diese sind nicht dasselbe.
Normalerweise würden Ihre CSS-Pixel auf die gleiche Größe wie Ihr Canvas-Zeichenraum eingestellt, aber wenn Sie mit Ihrem Browser ein-und auszoomen, sehen Sie das gleiche Problem erneut. Die Lösung besteht darin, window.devicePixelRatio zu verwenden und Ihren Zeichenfläche zu skalieren.
Quelle: JSFiddle
Mit dem Pixelverhältnis können wir den Zeichnungsraum für die Leinwand erhöhen. Wenn es jedoch nicht ausreicht, den Zeichenraum zu vergrößern, müssen wir der Leinwand auch mitteilen, dass zukünftige Zeichenoperationen auf das Pixelverhältnis skaliert werden müssen. Dies löst dann alle Skalierungsprobleme.,
Können Sie sagen, welche Canvas und welche SVG sind?
Fazit
Wie Sie sehen, gibt es zahlreiche Gründe, warum D3 für viele häufige Anwendungsfälle ziemlich veraltet ist. Das Web hat sich seit seiner Veröffentlichung erheblich weiterentwickelt., Wenn Sie einfache Diagramme wie Donuts, Balkendiagramme, Liniendiagramme, Streudiagramme usw. erstellen, sollten Sie prüfen, ob Sie sie mit Ihrem vorhandenen Framework implementieren können. Es gibt nichts wirklich, dass D3 Ihnen für diese Anwendungsfälle zur Verfügung stellen wird. In Bezug auf die Wartung ist Ihr Code wahrscheinlich wartbarer und nicht schwieriger zu warten, und wenn Sie Änderungen vornehmen müssen, sollte es trivial sein, diese Änderungen vorzunehmen.
Es gibt keinen Grund für Produktmanager, sich Sorgen zu machen, D3 nicht zu verwenden, und Sie sollten auch nicht besorgt sein.
Danke fürs Lesen!,
Updates
- Artikel aktualisiert, um hinzuzufügen “ Aber Canvas skaliert nicht wie SVG?” Abschnitt.