7 - Utiliser vos données

Lien vers le tutoriel original : http://alignedleft.com/tutorials/d3/using-your-data

Utiliser vos données

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

Une fois que vous avez chargé vos données et que vous les avez liées aux éléments nouvellement créés dans le DOM, comment pouvez-vous les utiliser ? Voilà notre code de la dernière fois :

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

d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text("New paragraph!");

Changeons la dernière ligne :

.text(function(d) { return d; });

Regardez ce que ce code fait sur cette page de démo.

Whoa ! On a utilisé nos données pour remplir le contenu de chaque paragraphe, tout ça grace à la magie de la méthode data(). Vous voyez, lorsque vous enchaînez des méthodes ensemble, après que vous ayez appelé data(), vous pouvez créer une fonction anonyme qui acceptera d en entrée. La méthode magique data() s’assure que d concorde avec la valeur correspondante dans votre ensemble de données original, en fonction de l’élément courant.

La valeur de “l’élément courant” change à mesure que D3 itère chaque élément. Par exemple, lorsqu’il itère pour la troisième fois, notre code crée la troisième balise p, et d correspond alors à la troisième valeur de notre ensemble de données (ou dataset[2]). Donc le troisième paragraphe voit son contenu texte défini à “15”.

Hautement fonctionnel

Dans le cas où vous seriez nouveau pour ce qui est d’écrire des fonctions (ou méthodes), la définition basique d’une fonction est :

function(valeur_en_entree) {
    //Calcule quelque chose ici
    return valeur_en_sortie;
}

La fonction utilisée plus haut est super simple, rien d’extraordinaire

function(d) {
    return d;
}

et elle est contenue dans la fonction text() de D3, donc tout ce que retourne notre fonction est remonté à text().

.text(function(d) {
    return d;
});

Mais on peut (et on le fera) être bien plus imaginatif, car vous pouvez personnaliser ces fonctions comme vous le souhaitez. Eh oui, c’est le plaisir et la douleur d’écrire votre propre JavaScript. On peut définir nos propres fonctions comme on veut. Peut-être voudrez-vous ajouter un peu plus de texte, ce qui produira ce résultat.

.text(function(d) {
    return "I can count up to " + d;
});

Les données veulent être entourées

Vous vous demandez peut-être pourquoi on est obligé d’écrire function(d) … plutôt que juste d tout seul. Par exemple, ceci ne fonctionnera pas :

.text("I can count up to " + d);

Dans ce contexte, sans entourer d dans une fonction anonyme, d n’aura pas de valeur. Pensez à d comme à une petite valeur placeholder qui a juste besoin d’un gros câlin de la part des parenthèses. (Si on va plus loin dans la métaphore, je vous l’accorde, c’est un peu terrifiant que ce câlin soit donné par une fonction anonyme — attention aux inconnus ! — mais ça ne fait qu’embrouiller les choses.)

Ici d est entouré, gentiment et de manière appropriée, par une fonction :

.text(function(d) {  // <-- Notez la tendre embrassade à gauche
    return "I can count up to " + d;
});

La raison de cette syntaxe est que text(), attr(), et plusieurs autres méthodes de D3 acceptent une fonction en argument. Par exemple, text() peut prendre soit une simple chaîne de caractères :

.text("someString")

… ou le résultat d’une fonction :

.text(someFunction())

… ou une fonction anonyme :

.text(function(d) {
    return d;
})

Au-dessus, vous définissez une fonction anonyme. Si D3 voit une fonction à cet endroit, il appellera cette fonction, en lui transmettant l’élément de donnée d en argument. Sans cette fonction, D3 ne peut pas savoir à qui transmettre l’argument d.

Au premier abord, ça peut paraître un peu idiot et beaucoup de travail en plus, juste pour avoir accès à d, mais l’intérêt de cette approche deviendra plus clair à mesure que l’on travaillera sur des morceaux plus complexes.

Au-delà du texte

Les choses deviennent bien plus intéressantes lorsque l’on explore les autres méthodes de D3, comme attr() et style(), qui permettent, respectivement, de définir les attributs HTML et les propriétés CSS sur des sélections.

Par exemple, ajouter une ligne de plus à notre code produit de résultat.

.style("color", "red");

Tout le texte est maintenant rouge. Pas très impressionant, mais on pourrait utiliser une fonction personnalisée pour rendre le texte rouge seulement si l’élément courant dépasse un certain seuil. Réécrivons notre dernière ligne de code pour utiliser une fonction :

.style("color", function(d) {
    if (d > 15) {   // Seuil de 15
        return "red";
    } else {
        return "black";
    }
});

Voir ce code en action. Notez que les trois premières lignes sont en noir, mais dès que d dépasse le seuil arbitraire de 15, le texte devient rouge.

Dans le prochain tutoriel, on utilisera attr() et style() pour manipuler des divs, et ainsi générer un simple graphique à barres — notre première visualisation !