D3 SelectAll 除了一个类来修改不透明度

Question

我正在研究以下径向图：

 //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。

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

见小提琴：JSFiddle

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

工作演示 - https://jsfiddle.net/hmLu4zqb/