Javascript D3选择除一个类之外的所有类以修改不透明度

我正在研究以下径向图：

 //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);
        });

默认情况下，我希望第一个“玩家”（弧和圆）处于活动状态。当用户将鼠标悬停在另一个圆弧或圆上时，除一次处于活动状态和正在悬停的圆弧和圆外，所有圆弧和圆都应淡入不透明度0.6

我遇到的问题是，当我悬停时，所有的弧和圆（包括活动的弧和圆）都会淡出

---

查看小提琴：

您可以使用“活动”类过滤选择并拒绝元素

---

正在运行的演示-

谢谢，但还不太清楚。似乎当您将鼠标悬停在一个圆弧上时，它旁边的圆弧也会激活。也许这在我的代码中的其他地方。非常感谢您在过滤方面的帮助。哦，是的。我不小心。您还应该检查索引，如：

j！=i-1？0.6:1

修复了它，过滤会弄乱索引

i

，因此在进行不透明度属性测试时需要减去1。我修改了你的解决方案。再次感谢！

teamArcs.on("mouseover", function(d, i) {
  //The following bit of code adapted from http://bl.ocks.org/WillTurman/4631136
  console.log("hello");
  g.selectAll(".teamArc")
    .filter(function() {
      return !this.classList.contains('active')
    })
    .transition()
    .duration(200)
    .attr("opacity", function(d, j) {
      return j != i - 1 ? 0.6 : 1;
    });

  g.selectAll(".teamCircle").transition()
    .filter(function() {
      return !this.classList.contains('active')
    })
    .duration(200)
    .attr("opacity", function(d, j) {
      return j != i - 1 ? 0.6 : 1;
    });
});