Voir la source de D3.js

[[Category:Technique]]

''Cette page est en grande partie issue de : [https://fxjollois.github.io/cours-2019-2020/du-dataviz--d3js.html Visualisation de données - d3.js]''

[https://d3js.org 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 :
<poem style="border: 2px solid #d6d2c5; background-color: #f9f4e6; padding: 0 1em;">
var selection1 = d3.select("selecteur");
var selection2 = d3.selectAll("selecteur");
</poem>
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