DC.js - Introduction à D3.js

D3.js est une bibliothèque JavaScript utilisée pour créer des visualisations interactives dans le navigateur. La bibliothèque D3 nous permet de manipuler des éléments d'une page Web dans le contexte d'un ensemble de données. Ces éléments peuvent être des éléments HTML, SVG ou Canvas et peuvent être introduits, supprimés ou modifiés en fonction du contenu de l'ensemble de données. C'est une bibliothèque pour manipuler des objets DOM. D3.js peut être une aide précieuse dans l'exploration des données. Il vous donne le contrôle sur la représentation de vos données et vous permet d'ajouter de l'interactivité des données.

D3.js est l'un des principaux frameworks par rapport aux autres bibliothèques. Ceci est dû au fait; il fonctionne sur le Web et les visualisations de données et est de qualité entreprise. Une autre raison est sa grande flexibilité, qui permet aux développeurs du monde entier de créer de nombreux graphiques avancés. En outre, il a étendu ses fonctionnalités dans une large mesure.

Comprenons les concepts de base de D3.js, qui sont les suivants -

Selections
Jointure de données
SVG
Transition
Animation
API D3.js

Comprenons chacun de ces concepts en détail.

Sélections

Les sélections sont l'un des principaux concepts de D3.js. Il est basé sur le concept CSS Selector. Ceux qui ont déjà utilisé et connaissent JQuery peuvent facilement comprendre les sélections. Il nous permet de sélectionner le DOM en fonction des sélecteurs CSS, puis de fournir des options pour modifier ou ajouter et supprimer les éléments du DOM.

Joindre des données

La jointure de données est un autre concept important dans D3.js. Il fonctionne avec les sélections et nous permet de manipuler le document HTML par rapport à notre ensemble de données (une série de valeurs numériques). Par défaut, D3.js donne à l'ensemble de données la priorité la plus élevée dans ses méthodes et chaque élément de l'ensemble de données correspond à un élément HTML.

SVG

SVG signifie Scalable Vector Graphics. SVG est un format graphique vectoriel basé sur XML. Il fournit des options pour dessiner différentes formes telles que des lignes, des rectangles, des cercles, des ellipses, etc. Par conséquent, la conception de visualisations avec SVG vous donne plus de puissance et de flexibilité.

Transformation

SVG fournit des options pour transformer un seul élément de forme SVG ou un groupe d'éléments SVG. La transformation SVG prend en charge la translation, la mise à l'échelle, la rotation et l'inclinaison.

Transition

La transition est le processus de changement d'un état à un autre d'un élément. D3.js fournit une méthode transition () pour effectuer une transition dans la page HTML.

Animation

D3.js prend en charge l'animation pendant la transition. L'animation peut être réalisée en utilisant correctement la transition. Les transitions sont une forme limitée d'animation d'images clés avec seulement deux images clés:start et end. L'image clé de départ est généralement l'état actuel du DOM et l'image clé de fin est un ensemble d'attributs, de styles et d'autres propriétés que vous spécifiez. Les transitions sont bien adaptées pour passer à une nouvelle vue sans code compliqué qui dépend de la vue de départ.

API D3.js

Laissez-nous comprendre quelques-unes des méthodes importantes de l'API D3.js en bref.

API Collections

Une collection est simplement un objet qui regroupe plusieurs éléments en une seule unité. Il est également appelé en tant que conteneur. Il contient des objets, des cartes, des ensembles et des nids.

API Paths

Les chemins sont utilisés pour dessiner des rectangles, des cercles, des ellipses, des polylignes, des polygones, des lignes droites et des courbes. Les chemins SVG représentent le contour d'une forme qui peut être tracée, remplie, utilisée comme tracé de détourage ou toute combinaison des trois.

API Axis

D3.js fournit des fonctions pour dessiner des axes. Un axe est composé de lignes, de graduations et d'étiquettes. Un axe utilise l'échelle, donc chaque axe devra avoir une échelle pour travailler avec.

API de zoom

Le zoom aide à mettre à l'échelle votre contenu. Vous pouvez vous concentrer sur une région particulière à l'aide de l'approche cliquer-glisser.

API de valeurs séparées par des délimiteurs

Un délimiteur est une séquence d'un ou de plusieurs caractères utilisée pour spécifier la limite entre des régions séparées et indépendantes en texte brut ou d'autres données. Un délimiteur de champ est une séquence de valeurs séparées par des virgules. En bref, les valeurs séparées par des délimiteurs sont des valeurs séparées par des virgules (CSV) ou des valeurs séparées par des tabulations (TSV).