D3js est une bibliothèque permettant de créer des graphiques et diagrammes interactifs, mais pour l'instant, l'utilisateur n'a qu'un rôle d'observateur, il est temps de rajouter un peu d'interactivité.

D3js propose une méthode permettant à l'utilisateur d'interagir avec le graphique ou le diagramme : la méthode on. Cette méthode on est associée à un élément créé par D3js

L méthode on prend 2 paramètres :

• une "action"
• une fonction qui sera appelée dès que l'utilisateur aura effectué "l'action" attendue.

Voici les principales "actions" :

• mouseover : quand le curseur de la souris passe au-dessus de l'élément concerné
• mouseout : quand le curseur de la souris "quitte" l'élément concerné
• click : quand l'utilisateur clique à l'aide de la souris sur l'élément concerné

À faire vous même 14.1

script.js

var tab=[30,150,27,85,3,12];

var body=d3.select("body");
var para=body.selectAll("p").data(tab);
para.enter()
    .append("p")
    .text(function(d,i){
        return ("La valeur n°"+i+" du tableau est : "+d)
    });
para.on("click",function(){
        d3.select(this)
            .style("color","red")
    });
            

Analysez et testez ce code

Vérifiez que si vous cliquez sur une phrase, elle devient rouge

---

Seule petite difficulté, le this du d3.select(this). Ce this désigne l'élément courant, dans notre cas this désigne le paragraphe sur lequel l'utilisateur a cliqué. Cela permet de différencier chaque paragraphe.

À faire vous même 14.2

Complétez le code ci-dessous afin d'obtenir ceci (passez avec le curseur de la souris sur les disques) :

var tab=[20,15,22,25,30,12];

var body=d3.select("body");
var svg=body.append("svg");
svg.attr({"width":"500px","height":"200px"});
var disque=svg.selectAll("circle").data(tab);
disque.enter()
    .append("circle")
    	.attr("cx",function(d,i){
        	return (30+60*i)
    	})
    	.attr("cy",function(d,i){
        	return 100
    	})
    	.attr("r",function(d,i){
        	return (d)
    	});
..............
..............
..............
..............
..............