Ines m'écrit : Avec Valentin nous sommes en train de faire notre devoir n°2.
Nous avons reproduit le pie chart sur la population par tranche d'âge aux Etats Unis.
Cependant nous sommes bloqués pour l'ajout d'interactivité.

Notre idée est la suivante : pouvoir sélectionner un affichage par effectif ou par pourcentage.
On a donc ajouté un menu déroulant en haut.
Le problème est que chaque fois qu'on change le choix, le texte est ajouté par-dessus le précédent, ce qui rend le pie chart illisible.
On a essayé quelques modifications et maintenant le texte ne change plus du tout.
Je pense que cela vient de la définition de l'environnement de texte (svg.append("g").selectAll("text")) qu'on ne doit pas comprendre.

Arthur Katossky

Dans: 
          .call(text => text.append("tspan")
              .attr("y", "-0.4em")
              .attr("font-weight", "bold")
              .text(d => d.data.name))
          .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")
              .attr("x", 0)
              .attr("y", "0.7em")
              .attr("fill-opacity", 0.7)
              .text(d => valeur))
... vous ajoutez les deux textes l'un après l'autre.

Vous avez tout à le droit de la faire, mais il faut au moins rendre l'un des deux séries de textes transparente (vous avez déjà une partie du boulot de faite avec .attr("fill-opacity", 0.7).

Je pense que le plus simple pour vous est: de créer deux variables : `effecifs` un élément de type g qui contiendra tous les effectifs, et `pourcentages`, un élément de type g qui contiendra tous les pourcentages. Quand la valeur de votre selecteur change, vous n'avez plus qu'à rendre effectifs ou pourcentages transparent. Lorsqu'un groupe est transparent, c'est l'ensemble des éléements qu'il contient qui devient transparent.

Encore plus simple, vous pouvez à la place donner des classes à vos éléments tspan (avec la méthode classed()) par exemple la classe "pourcentage" ou "effectif"). Ensuite vous pouvez sélectionner facilement les éléments de la classe "pourcentage" avec svg.selectAll(".pourcentage") (le point est volontaire) et, à nouveau, utiliser la transparence pour afficher ou ne pas afficher vos textes.