D3.js

Cette page est en grande partie issue de : Visualisation de données - d3.js

d3.js est une librairie javascript très complète avec beaucoup d’exemples à disposition, avec une personnalisation totale possible. Elle permet l’accès à des primitives SVG permettant toute innovation. Malheureusement, elle est peu accessible directement et assez technique.

Fonctionnement typique

L’idée principale est de lier les données au DOM (Document Object Model), et d’appliquer des transformations, basées sur les données, au document.

Il y a plusieurs concepts spécifiques à bien comprendre pour l’utiliser pleinement :

• Sélection, modification, ajout et insertion d’éléments
• Ajout de données au DOM
• Propriété dynamique, et Transformation
• Chaînage des fonctions

Base

Sélection

Il existe deux fonctions de sélection respectivement d’un seul élément (avec select()) et de l’ensemble des éléments (avec selectAll()) correspondant à la définition passée en paramètre :

var selection1 = d3.select("selecteur");
var selection2 = d3.selectAll("selecteur");

Quand on utilise une sélection d’un seul élément (avec select() donc), mais qu’il existe plusieurs éléments de ce type dans le document, c’est le premier qui est renvoyé.

La sélection se fait de manière identique que pour le CSS :

• "balise" : pour tout ce qui est balise html (div, h1, body, …)
• ".maclasse" : pour le ou les objets de la classe indiquée (indiquée via "class='maclasse'")
• "#identifiant" : pour l’objet (unique normalement) avec cet identifiant (indiquée via "id='identifiant'")

Ces sélecteurs permettent ensuite d’accéder à plusieurs fonctions utiles pour manipuler les objets, comme nous le verrons. Voici trois premières fonctions :

• size() : taille de la sélection
• empty() : sélection vide ou non
• html() : contenu html de la sélection

Modification, ajout et insertion d’éléments

Plusieurs fonctions permettent de modifier les éléments sélectionnés (comme par exemple style() pour appliquer des règles CSS ou html() pour modifier le contenu de la balise). Le code suivant permet de mettre le texte en rouge pour tout le corps de la page

var corps = d3.select("body");
corps.style("color", "red");

Deux fonctions sont utiles pour respectivement insérer un élément HTML fils à la fin (append()) ou au début (insert()) d’un élément père, qui s’utilisent comme suit :

selection.append("balise");
selection.insert("balise");