D3.js - Concepts

D3.js est une bibliothèque JavaScript open source pour -

Manipulation basée sur les données du modèle d'objet de document (DOM).
Travailler avec des données et des formes.
Mise en page des éléments visuels pour les données linéaires, hiérarchiques, de réseau et géographiques.
Permettre des transitions fluides entre les états de l'interface utilisateur (UI).
Permettre une interaction utilisateur efficace.

Normes Web

Avant de pouvoir commencer à utiliser D3.js pour créer des visualisations, nous devons nous familiariser avec les standards Web. Les standards Web suivants sont largement utilisés dans D3.js.

Langage de balisage HyperText (HTML)
Modèle d'objet de document (DOM)
Feuilles de style en cascade (CSS)
Graphiques vectoriels évolutifs (SVG)
JavaScript

Passons en revue chacune de ces normes Web une par une en détail.

Langage de balisage HyperText (HTML)

Comme nous le savons, HTML est utilisé pour structurer le contenu de la page Web. Il est stocké dans un fichier texte avec l'extension «.html».

Example - Un exemple HTML simple typique ressemble à ceci

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

   <body>
   </body>
</html>

Modèle d'objet de document (DOM)

Lorsqu'une page HTML est chargée par un navigateur, elle est convertie en une structure hiérarchique. Chaque balise HTML est convertie en élément / objet dans le DOM avec une hiérarchie parent-enfant. Cela rend notre HTML plus structuré de manière logique. Une fois le DOM formé, il devient plus facile de manipuler (ajouter / modifier / supprimer) les éléments de la page.

Comprenons le DOM en utilisant le document HTML suivant -

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

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

Le modèle d'objet de document du document HTML ci-dessus est le suivant,

Feuilles de style en cascade (CSS)

Alors que HTML donne une structure à la page Web, les styles CSS rendent la page Web plus agréable à regarder. CSS est unStyle Sheet Languageutilisé pour décrire la présentation d'un document écrit en HTML ou XML (y compris les dialectes XML comme SVG ou XHTML). CSS décrit comment les éléments doivent être rendus sur une page Web.

Graphiques vectoriels évolutifs (SVG)

SVG est un moyen de rendre des images sur la page Web. SVG n'est pas une image directe, mais c'est juste un moyen de créer des images à l'aide de texte. Comme son nom l'indique, c'est unScalable Vector. Il se met à l'échelle en fonction de la taille du navigateur, donc le redimensionnement de votre navigateur ne déformera pas l'image. Tous les navigateurs prennent en charge SVG sauf IE 8 et les versions antérieures. Les visualisations de données sont des représentations visuelles et il est pratique d'utiliser SVG pour rendre les visualisations à l'aide de D3.js.

Considérez SVG comme une toile sur laquelle nous pouvons peindre différentes formes. Alors pour commencer, créons une balise SVG -

<svg width = "500" height = "500"></<svg>

La mesure par défaut pour SVG est le pixel, nous n'avons donc pas besoin de spécifier si notre unité est le pixel. Maintenant, si nous voulons dessiner un rectangle, nous pouvons le dessiner en utilisant le code ci-dessous -

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200"></rect>
</svg>

Nous pouvons dessiner d'autres formes en SVG telles que - Ligne, Cercle, Ellipse, Texte et Chemin.

Tout comme le style des éléments HTML, le style des éléments SVG est simple. Définissons la couleur de fond du rectangle sur jaune. Pour cela, nous devons ajouter un attribut «fill» et spécifier la valeur en jaune comme indiqué ci-dessous -

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200" fill = "yellow"></rect>
</svg>

JavaScript

JavaScript est un langage de script côté client au typage lâche qui s'exécute dans le navigateur de l'utilisateur. JavaScript interagit avec les éléments HTML (éléments DOM) afin de rendre l'interface utilisateur Web interactive. JavaScript implémente leECMAScript Standards, qui comprend des fonctionnalités de base basées sur les spécifications ECMA-262 ainsi que d'autres fonctionnalités, qui ne sont pas basées sur les normes ECMAScript. La connaissance de JavaScript est un prérequis pour D3.js.

↰ Previous page Next page ↱