Tutoriel : Introduction à la librarie javascript d3.js

Voici le premier d’une longue lignée (je l’espère) de tutoriaux en français portant sur la librarie d3.js. Pour en savoir plus sur cette librairie reportez vous à la présentation que j’en ai fait sur ce post. L’objectif de ce premier tutoriel est de faire quelques exemples d’utilisation très simple de la librairie.

A l’instart de Jquery, d3.js est une librarie qui permet de manipuler le DOM. Mais là où d3.js est très efficace est dans la manipulation de SVG.

Manipuler ou créer une div avec d3.js

Ajouter et manipuler un rectangle SVG

Dessiner plusieurs éléments dans un groupe svg

Gérer des données au format JSON et dessiner en fonction de ces données

Dans ce dernier exemple, nous allons construire des nodes qui sont en fait des groupes svg ayant la class « node ». Ensuite, on va dessiner, suivant les données (variable data) un cercle et afficher le nom de ce cercle dans celui -ci.

Le dernier exemple introduit plusieurs nouveaux concepts : selectAll(), data(), et enter().

selectAll()

la methode de selection selectAll permet, comme son nom l’indique de selectionner les éléments définis par le selecteur css passé en argument. selectAll(« p ») va selectionner tous les éléments présents dans le DOM.

data()

La methode data() permet de « binder » (attacher) des données à des éléments sélectionnés par la methode selectAll(). Ces données une fois attachées seront utilisables dans la suite du chainage. Exemple : attr(« fill »,function(d){return d.color});

enter()

Cette fonction va « binder » les données à des éléments et créer les éléments sélectionnés par selectAll(). Si vous n’utilisez pas enter() alors aucun élément ne sera crée. Seul les éléments existants seront utilisés et donc s’il sont inexistant, rien ne s’affichera.

Ressources

• W3 School, documentation sur le SVG
• Le site de d3.js
• Approfondir sur le DOM (Document Object Model)