Tutoriel : Introduction à la librarie javascript d3.js

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 faite 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

7 Commentaires

Diarra

A propos4 années ago

Bonjour, Je n'arrive pas à voir les résultats.C'est normal ?

Répondre

Imatt

A propos4 années ago

Bonjour Diarra, Qu'est ce que tu n'arrive pas à voir ? Les résultats dans JSFiddle ? Quel navigateur utilises-tu ? Système d'exploitation ? Que se passe t'il si tu clique sur Edit JSFiddle de chaque exemple ?

Répondre

amani

A propos3 années ago

Bonjour, j'ai utilise la library scatter pour dessiner un scatter et sa marche normal, mais comment peux ai je ajouter sous le plan de scatter une image. Comme si je vais obtenir une image sur le plan x,y ?

Répondre

Piarulli Pierre-Alexandre

A propos3 années ago

Bonne article ! j'ai fait des essais on peut aussi passer une table de hash a la methode .attr pratique :) Je me demande si il est facile de faire des groupes d'objets, ( genre un rond un trait un rond dont les taille réagie aux data ) ?

Répondre

Imatt

A propos3 années ago

Salut Piarulli, Regarde cet exemple, ça devrait t'aider : http://jsfiddle.net/undisconnected/asCT4/1/light/ Si tu fait translate sur le groupe, tout ton groupe d"objet va se déplacer. (avec l'attribut translate). Dis-moi si ça t'aide !

Répondre

Torrent007

A propos3 années ago

Bonjour !! Déjà, merci pour ce petit tuto en français sur la librairie d3 ! Tu parles dans le tuto d'une suite et je me demandais si tu avais peut-être laissé tomber sa production ou si tu était toujours sur le coup? J'avoue que tes exemples sont clairs et parfait un débutant d3 comme moi :)

Répondre

Imatt

A propos3 années ago

Salut Fabien, Merci pour tes bons mots :) Ça fait toujours plaisir ! Pour ce qui est d'un nouveau tutoriel sur D3, ça va venir. Aurais-tu des choses que tu aimerais voir dans le prochain tutoriel ?

Répondre

Laisser un commentaire

Please be polite. We appreciate that.
Your email address will not be published and required fields are marked