DC.js - Konzepte

DC.js ist für die meisten Front-End-Entwickler einfach und unkompliziert. Es ermöglicht das schnelle Erstellen grundlegender Diagramme, auch ohne Kenntnis von D3.js. Zuvor verwenden wir DC.js, um eine Visualisierung zu erstellen. Wir müssen uns mit Webstandards vertraut machen. Die folgenden Webstandards werden häufig in D3.js verwendet, der Grundlage von DC.js zum Rendern von Diagrammen.

Hypertext Markup Language (HTML)
Dokumentobjektmodell (DOM)
Cascading Style Sheets (CSS)

Lassen Sie uns jeden dieser Webstandards im Detail verstehen.

Hypertext Markup Language (HTML)

Wie wir wissen, wird HTML verwendet, um den Inhalt der Webseite zu strukturieren. Es wird in einer Textdatei mit der Erweiterung ".html" gespeichert.

Ein typisches grundlegendes HTML-Beispiel sieht wie folgt aus:

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>
   
   <body>

   </body>
</html>

Dokumentobjektmodell (DOM)

Wenn eine HTML-Seite von einem Browser geladen wird, wird sie in eine hierarchische Struktur konvertiert. Jedes Tag in HTML wird in ein Element / Objekt im DOM mit einer Eltern-Kind-Hierarchie konvertiert. Dadurch wird unser HTML logischer strukturiert. Sobald das DOM erstellt ist, können die Elemente auf der Seite einfacher bearbeitet (hinzugefügt / geändert / entfernt) werden.

Lassen Sie uns das DOM anhand des folgenden HTML-Dokuments verstehen:

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

Das Dokumentobjektmodell des obigen HTML-Dokuments lautet wie folgt:

Cascading Style Sheets (CSS)

Während HTML der Webseite eine Struktur verleiht, machen CSS-Stile die Webseite angenehmer anzusehen. CSS ist eine Stylesheet-Sprache, mit der die Darstellung eines in HTML oder XML geschriebenen Dokuments (einschließlich XML-Dialekten wie SVG oder XHTML) beschrieben wird. CSS beschreibt, wie Elemente auf einer Webseite gerendert werden sollen.

JavaScript

JavaScript ist eine lose typisierte clientseitige Skriptsprache, die im Browser des Benutzers ausgeführt wird. JavaScript interagiert mit HTML-Elementen (DOM-Elementen), um die Webbenutzeroberfläche interaktiv zu gestalten. JavaScript implementiert die ECMAScript-Standards, die Kernfunktionen basierend auf der ECMA-262-Spezifikation sowie andere Funktionen enthalten, die nicht auf ECMAScript-Standards basieren. JavaScript-Kenntnisse sind Voraussetzung für DC.js.

Komponenten

DC.js basiert auf zwei hervorragenden JavaScript-Bibliotheken:

Crossfilter
D3.js

Crossfilter

Crossfilter ist eine JavaScript-Bibliothek zum Durchsuchen großer multivariater Datensätze im Browser. Es wird zum schnellen Gruppieren, Filtern und Aggregieren von Zehntausenden oder Hunderttausenden von Rohdatenzeilen verwendet.

D3.js

D3.js steht für Data-Driven Documents. D3.js ist eine JavaScript-Bibliothek zum Bearbeiten von Dokumenten basierend auf Daten. D3 ist ein dynamisches, interaktives Online-Datenvisualisierungs-Framework, das auf einer großen Anzahl von Websites verwendet wird. D3.js wird geschrieben vonMike Bostock, erstellt als Nachfolger eines früheren Visualisierungs-Toolkits namens Protovis. D3.js wird auf Hunderttausenden von Websites verwendet.