d3 groupe en surbrillance graphique groupé sur mouseover

Question

Résolu: jsfiddle

Issue # 1: Avoir un graphique à barres groupées. Je voudrais que le groupe mette en évidence si des barres du groupe sont survolées. Actuellement, au passage de la souris, tous les rappels ont la classe 'bar' à l'opacité 0.5, puis le rect spécifique à l'opacité 1. Mais comment puis-je définir le noeud ou le groupe de barres à opacité 1 pour les mettre en évidence ?

.on("mouseover", function(d, i, node) { //this is repeated should be in a function 
     d3.selectAll(".bar").transition() 
      .style("opacity", 0.3); //all groups given opacity 0 
     d3.select(this).transition() 
      .style("opacity", 1); //give opacity 1 to group on which it hovers. 
     return tooltip 
      .style("visibility", "visible") 
      .html("<span style=font-size:30px;> " + "name:" + d.name + 
      "</span>" 
     ) 
     }) 
     .on("mouseout", function(d) { 
     d3.selectAll(".bar").transition() 
      .style("opacity", 1); 
     return tooltip.style("visibility", "hidden"); 
     }) 

Problème n ° 2: J'aimerais également que les étiquettes des axes x de la barre se comportent de la même manière. Alors que les noms de tous, mais la barre actuelle aurait opacité 0,5

J'ai essayé d'ajouter un clas de la barre au texte axeX, mais ne fonctionne pas,

.call(xAxis) 
     .selectAll("text") 
     .style("text-anchor", "end") 
     .style("font", "20px times") 
     .attr("dx", "-.8em") 
     .attr("dy", ".15em") 
     .attr("class", "bar") 
     .attr("transform", "rotate(-65)"); 

Je cet essai de mise en œuvre des idées ce poste

D3 Grouped Bar Chart - Selecting entire group?

mais je n'ai pas été en mesure de le faire fonctionner.

Ma tentative pour donner une classe de d.name + index à chaque barre d'un groupe. Mais je ne peux pas sélectionner alors, le retour "." + d.name ne fonctionne pas comme je m'y attendais.

 .attr("class", function(d, i) { 
     return d.name.replace(/\s/g, '') + i + " bar" 
     }) 
     .on("mouseover", function(d, i, node) { 
     d3.selectAll(".bar").transition() 
      .style("opacity", 0.3); 
     d3.selectAll("." + d.name.replace(/\s/g) + i) 
      .transition() 
      .style("opacity", 1); 
     return tooltip 
      .style("visibility", "visible") 
      .html("<span style=font-size:30px;> " + "name:" + d.name + 
      "</span>"); 
     }) 

La sélection devrait être,

d3.selectAll("." + d.name.replace(/\s/g, '') + i) 

En fait, chaque barre dans chaque groupe pourrait être simplement donné une classe de « groupe + index ». Il n'y a pas besoin de l'expression régulière. À l'exception du texte sur le xAxis, la surbrillance fonctionne désormais correctement.

Toute aide serait grandement appréciée,

Merci

Answer 1

Cela fonctionne jsFiddle

.on("mouseover", function(d, i, node) { 
     d3.selectAll(".bar").transition() 
      .style("opacity", 0.3); 
     d3.selectAll(".xAxisText").transition() 
      .style("fill", "lightgray") 
      .style("font-weight", "100"); //all groups given opacity 0 
     d3.selectAll(".groupText" + i) 
      .transition() 
      .style("font-weight", "900") 
      .style("fill", "black"); //give opacity 1 to group on which it hovers. 
     d3.selectAll(".group" + i) 
      .transition() 
      .style("opacity", 1); 
     return tooltip 
      .style("visibility", "visible") 
      .html("<span style=font-size:30px;> " + "name: " + d.name + 
      " (on blue bar)</span>"); 
     }) 
     .on("mouseout", function(d) { 
     d3.selectAll(".bar").transition() 
      .style("opacity", 1); 
     d3.selectAll(".xAxisText").transition() 
      .style("fill", "black") 
      .style("font-weight", "normal"); 
     return tooltip.style("visibility", "hidden"); 
     }) 

Answer 2

vous pouvez baser l'opacité pour toutes les barres sur sa valeur .name (qui est attribut commun par groupe dans votre exemple), par exemple

.on("mouseover", function(d) { 
    let selectedName = d.name; 
    d3.selectAll(".bar") 
     .style("opacity", function(d) { 
     return d.name == selectedName ? 1 : 0.3; 
     }) 

    //etc