Avant de poursuivre, il est nécessaire d'ouvrir une parenthèse consacrée aux fonctions anonymes en JavaScript.

Une fonction anonyme est une fonction qui, comme son nom l'indique, ne porte pas de nom. Elle ne peut donc pas être utilisée "classiquement" puisqu'il est impossible de l'appeler.

Dans la plupart des cas, une fonction anonyme est utilisée comme paramètre d'une autre fonction. Tout cela est un peu complexe, prenons un exemple :

À faire vous même 5.1

En utilisant JSFIDDLE, testez le code ci-dessous :


function MaFonction (f){
    f();
}
MaFonction(function(){alert("Cela fonctionne")});

Dans l'exemple ci-dessus, nous définissons une fonction MaFonction. Cette fonction attend comme paramètre une fonction.

MaFonction(function(){alert("Cela fonctionne")}); nous faisons appel à la fonction que nous venons de définir et nous passons en paramètre une fonction anonyme function(){alert("Cela fonctionne")}

Le plus important à comprendre est le fait que certaines fonctions (ou méthodes) peuvent prendre en paramètre une fonction. La fonction qui est passée en paramètre peut être une fonction anonyme.

Ceci étant dit, revenons maintenant à D3.

Les méthodes attr ou style ou encore text, que nous avons vu peuvent prendre une fonction anonyme en paramètre.

À faire vous même 5.2

script.js 


var body=d3.select("body");
body.append("p")
    .text(function(){var monTexte="Cela fonctionne"; return monTexte;});

Testez ce code

Il est aussi possible, afin de rendre le code plus lisible, de présenter les choses de cette façon :


var body=d3.select("body");
body.append("p")
    .text(function(){
        var monTexte="Cela fonctionne";
        return monTexte;});

Comme vous pouvez le constater, la méthode text prend en paramètre une fonction anonyme. Cette fonction anonyme retourne la chaîne de caractère "Cela fonctionne". La méthode text utilise la valeur retournée par la fonction anonyme.

Pour l'instant, l'intérêt de ce que nous venons de voir peut paraitre proche de nul ! En effet, le code ci-dessous ferait exactement la même chose :


var body=d3.select("body");
body.append("p")
    .text("Cela fonctionne");

Prenons un autre exemple, qui commencera à vous montrer l'intérêt des fonctions anonymes.

À faire vous même 5.3

script.js 


var body=d3.select("body");
body.append("p")
    .style("color",function(){
        var couleur=prompt("choisissez une couleur 1-rouge 2-bleue (tapez 1 ou 2)");
        if (couleur=="1"){
            return "red";
        }
        else if (couleur=="2"){
            return "blue";
        }
        else{
            return "black";
        }
      })
    .text("Cela fonctionne");

Testez ce code

Le deuxième paramètre de la méthode style est une fonction anonyme qui renvoie "red", "blue" ou "black" en fonction de la valeur saisie au clavier par l'utilisateur. Selon la valeur saisie par l'utilisateur nous aurons l'équivalent d'un :