title: D3 SelectAll except one class to modify opacity
body: <p>I'm working on the following radial graph: </p>
  
  <pre><code> //Fade out all players except the first player
          g.selectAll(".teamArc")
                  .attr("opacity", 0.6);
  
          g.selectAll(".teamCircle")
                  .attr("opacity", 0.6);
  
          //Select the first player by default
          var firstPlayer = arcAndCircleG.first();
  
          firstPlayer.select(".teamArc")
                      .classed("active", true)
                      .attr("id", "selected")
                      .attr("stroke", "green")
                      .attr("stroke-width", "1px")
                      .attr("opacity", 1);
  
          firstPlayer.select(".teamCircle")
                      .classed("active", true)
                      .attr("id", "selected")
                      .attr("stroke", "green")
                      .attr("stroke-width", "1px")
                      .attr("opacity", 1);
  
  
          teamCircles.on("mouseover", function(d,i){
  
              g.selectAll(".teamArc").transition()
                      .duration(200)
                      .attr("opacity", function(d,j){
                          return j != i ? 0.6 : 1;
                      });
  
              g.selectAll(".teamCircle").transition()
                      .duration(200)
                      .attr("opacity", function(d,j){
                          return j != i ? 0.6 : 1;
                      }); 
  
          });
  
          teamCircles.on("mousemove", function(d){
  
              d3.select(this)
                  .classed("hover", true)
                  .attr("stroke", "black")
                  .attr("stroke-width", "1px");
  
              d3.select(this.parentNode)
                  .select(".teamArc")
                  .classed("hover", true)
                  .attr("stroke", "black")
                  .attr("stroke-width", "1px");        
          });
  
          teamCircles.on("mouseout", function(d){
  
              g.selectAll(".teamCircle")
                  .transition()
                  .duration(200)
                  .attr("opacity", 1);
  
              g.selectAll(".teamArc")
                      .transition()
                      .duration(200)
                      .attr("opacity", 1);
  
              d3.select(this)
                  .classed("hover", false)
                  .attr("stroke", "black")
                  .attr("stroke-width", "0px");
  
              d3.select(this.parentNode)
                  .select(".teamArc")
                  .classed("hover", false)
                  .attr("stroke", "black")
                  .attr("stroke-width", "0px");    
  
          });
  
          teamCircles.on("click", function(d){
              console.log("selected");
              g.selectAll(".teamCircle")
                      .attr("opacity", 0.6)
                      .attr("stroke-width", "0px");
  
              g.selectAll(".teamArc")
                      .attr("opacity", 0.6)
                      .attr("stroke-width", "0px");
  
  
              d3.select(this)
                  .classed("clicked", true)
                  .attr("opacity", 1)
                  .attr("stroke", "green")
                  .attr("stroke-width", "2px");
  
              d3.select(this.parentNode)
                  .select(".teamArc")
                  .classed("clicked", true)
                  .attr("opacity", 1)
                  .attr("stroke", "green")
                  .attr("stroke-width", "2px");
          })
  
          teamArcs.on("mouseover", function(d,i){
                      //The following bit of code adapted from http://bl.ocks.org/WillTurman/4631136
  
              g.selectAll(".teamArc").transition()
                      .duration(200)
                      .attr("opacity", function(d,j){
  
  
                          return j != i ? 0.6 : 1;
                      });
  
              g.selectAll(".teamCircle").transition()
                      .duration(200)
                      .attr("opacity", function(d,j){
                          return j != i ? 0.6 : 1;
                      }); 
  
              // var clickedCircle = g.selectAll(".teamCircle")
              //                     .filter("active");
  
              // var clickedArc = g.selectAll(".teamArc")
              //                     .filter("active");
  
              // clickedArc.attr("fill", "green");
  
              // console.log(clickedCircle);
              // console.log(clickedArc);                        
          });
  
          teamArcs.on("mousemove", function(d){
  
              d3.select(this)
                  .classed("hover", true)
                  .attr("stroke", "black")
                  .attr("stroke-width", "1px");
  
              d3.select(this.parentNode)
                  .select(".teamCircle")
                  .classed("hover", true)
                  .attr("stroke", "black")
                  .attr("stroke-width", "1px"); 
          });
  
          teamArcs.on("mouseout", function(d){
              g.selectAll(".teamArc")
                      .transition()
                      .duration(200)
                      .attr("opacity", "1");
  
              d3.select(this)
                  .classed("hover", false)
                  .attr("stroke", "black")
                  .attr("stroke-width", "0px");
  
              d3.select(this.parentNode)
                  .select(".teamCircle")
                  .classed("hover", false)
                  .attr("stroke", "black")
                  .attr("stroke-width", "0px"); 
  
              g.selectAll(".teamCircle")
                  .transition()
                  .duration(200)
                  .attr("opacity", 1);
          });
  </code></pre>
  
  <p>By default, I would like the first "player" (arc and circle) to be active. When the user hovers over another arc or circle, all of the arcs and circles except for the once that is active and the one that is being hovered should fade to opacity 0.6. </p>
  
  <p>The problem I am having is that when I hover, all of the arcs and circles (including the active one) are fading out. </p>
  
  <p>See the fiddle:<a href="https://jsfiddle.net/roushb/neppanj5/9/" rel="nofollow noreferrer">JSFiddle</a></p>