8 - Dessiner des divs

Lien vers le tutoriel original : http://alignedleft.com/tutorials/d3/drawing-divs

Dessiner des divs

Dernière mise à jour le 30 décembre 2012

Il est temps de se mettre à dessiner avec des données.

Continuons de travailler avec notre ensemble de données de la dernière fois :

var dataset = [ 5, 10, 15, 20, 25 ];

Nous l’utiliserons pour générer un graphique à barres super simple. Les graphiques à barres sont essentiellement de simples rectangles et un élément HTML <div> est la manière la plus facile de dessiner un rectangle. (Encore une fois, pour un navigateur, tout est un rectangle, donc vous pourriez facilement adapter cette exemple pour utiliser des spans ou n’importe quel élément que vous préféreriez.)

Ce div fonctionnerait bien comme barre de données :

<div style="display: inline-block;
        width: 20px;
        height: 75px;
        background-color: teal;"></div>

(Pour les standardistes du web, c’est un contre-sens sémantique. Normallement, on ne devrait pas utiliser un div vide juste pour l’effet visuel, mais les tutoriels de programmation font partie des exceptions.)

Comme c’est un div, sa largeur width et sa hauteur height sont définies par des styles CSS. Chaque barre dans notre graphique partagera les mêmes propriétés d’affichage (exceptée la hauteur height), donc je vais mettre ces styles partagés dans une classe appelée bar :

div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;   /* On écrasera ça plus tard */
    background-color: teal;
}

Maintenant chaque div doit se voir assigner la classe bar, pour que notre règle CSS s’applique. Si vous écriviez le code HTML à la main, ça donnerait :

<div class="bar"></div>

En utilisant D3, pour ajouter une classe à un élément, on utilise la méthode selection.attr(). Il est important de comprendre la différence entre attr() et sa proche cousine, style().

Définir des attributs

attr() est utilisée pour définir un attribut HTML et sa valeur à un élément. Un attribut HTML est n’importe quelle paire clé/valeur que vous pourriez inclure entre les balises <> d’un élément. Par exemple, ces éléments HTML

<p class="caption">
<select id="country">
<img src="logo.png" width="100px" alt="Logo" />

contiennent un total de cinq attributs (et valeurs correspondantes), chacun pouvant être défini avec attr():

class   |   caption
id      |   country
src     |   logo.png
width   |   100px
alt     |   Logo

Pour donner à nos divs une classe bar, on peut utiliser :

.attr("class", "bar")

À propos des classes

Notez que la classe d’un élément est stockée dans un attribut HTML. La classe, à son tour, est utilisée pour référencer une règle de style CSS. Cela peut causer un peu de confusion car il y a une différence entre définir une classe (à partir de laquelle on déduit les styles à appliquer) et appliquer un style directement sur l’élément. Vous pouvez faire les deux avec D3. Bien que vous devriez utiliser l’approche qui a le plus de sens pour vous, je vous recommande d’utiliser des classes pour les propriétés qui sont partagées par plusieurs éléments, et appliquer des règles de style directement sur l’élément seulement lorsque vous déviez de la norme. (En fait, c’est ce que nous ferons dans un instant.)

Je tenais aussi à mentionner brièvement une autre méthode de D3, classed(), qui peut être utilisée pour ajouter ou supprimer des classes d’un élément. La ligne de code du dessus peut être réécrite comme cela :

.classed("bar", true)

Retour aux barres

Au final, voilà notre code D3 :

var dataset = [ 5, 10, 15, 20, 25 ];

d3.select("body").selectAll("div")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class", "bar");

Voir la page de démonstration

Regardez bien le code source, ouvrez votre inspecteur web pour voir ce qui se passe. Vous devriez voir cinq barres verticales, une générée pour chaque point dans notre ensemble de données, mais sans espace entre elles, elles ressemblent juste à un gros rectangle.

Définir des styles

La méthode style() est utilisée pour appliquer une propriété CSS directement à un élément HTML. Ça équivaut à inclure des régles CSS à l’intérieur d’un attribut style directement dans votre HTML, comme ça :

<div style="height: 75px;"></div>

Dans un graphique à barres, la hauteur de chaque barre doit être fonction de la valeur qu’elle doit représenter. Alors ajoutons cela à la fin de notre code D3 :

.style("height", function(d) {
    return d + "px";
});

Voir la page de démonstration

Vous devriez voir un tout petit graphique à barres !

Lorsque D3 itère chaque élément de données, la valeur de d correspondra à cet élément. Donc on définit la hauteur height à une valeur de d (l’élément de données courant) plus px (pour spécifier que l’on parle en pixels). Les hauteurs résultantes seront 5px, 10px, 15px, 20px, and 25px.

Ça ressemble pas à grand chose, agrandissons nos barres

.style("height", function(d) {
    var barHeight = d * 5;  // On agrandit 5 fois l'échelle
    return barHeight + "px";
});

et ajoutons de l’espace à la droite de chaque barre, pour leur donner un peu d’air :

margin-right: 2px;

Classe ! On pourrait aller au SIGGRAPH avec ce graphique. (NDT : le SIGGRAPH est un séminaire américain sur l’infographie qui à lieu tous les ans.)

Voilà la page de démo pour notre code final. Encore une fois, regardez les sources et ouvrez votre inspecteur web pour voir la différence entre le code HTML original et le DOM final.