D3 Mouseover Not Firing

Question

我正在使用D3版本3，並且遇到了鼠標懸停事件問題。

從下面的代碼可以看出，我已經分組了弧和圓的元素。當我將鼠標懸停在其中一個上時（即，如果我將鼠標懸停在teamCircle之後，我希望teamCircle和teamArc都有黑色筆劃）。

這適用於圓弧，但由於某些原因，完全相同的代碼無法在圓上工作。控制檯不記錄，所以它就好像根本沒有開火。有任何想法嗎？

UPDATE：在這裏看到的小提琴：https://jsfiddle.net/roushb/neppanj5/1/

var arcAndCircleG = g.selectAll("g") 
          .attr("class", "arcAndCircle") 
          .data(dataArr) 
          .enter() 
          .append("g"); 

    var teamArcs = arcAndCircleG.append("path") 
           .attr("class", "teamArc") 
           .style("fill", "orange") 
           .attr("d", d3.svg.arc() 
                .innerRadius(width/8) 
                .outerRadius(function(d){return barScale(d.WAR)}) 
                .startAngle(function(d, i){ 

                 return 2 * i * Math.PI/30; 
                }) 
                .endAngle(function(d, i){ 
                 return 2 * (i + 0.95) * Math.PI/30; 
                }) 

                ); 


    var teamCircles = arcAndCircleG.append("circle") 
            .attr("class", "teamCircle") 
            .attr("cx", function(d, i){ 
             var add = i * Math.PI * 2/30 
             var ang = Math.PI - 0.1 - add; 
             var arcRad = (innerRadius + outerRadius)/2.0; 
             var cx = arcRad * Math.sin(ang); 
             return cx; 
            }) 
            .attr("cy", function(d, i){ 
             var add = i * Math.PI * 2/30 
             var ang = Math.PI - 0.1 - add; 
             var arcRad = (innerRadius + outerRadius)/2.0; 
             var cy = arcRad * Math.cos(ang); 
             return cy; 
            }) 
            .attr("r", function(d, i){ 
             return (width/100); 
            }) 
            .style("fill", "#fff") 
            .style("fill", function(d){return "url(#"+d.playerid+")"}); 


    teamCircles.on("mouseover", function(d,i){ 
       //The following bit of code adapted from http://bl.ocks.org/WillTurman/4631136 
     console.log("over"); 
     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"); 


    }); 

    //Drawing rect to contain sliders 

    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").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; 
       });       
    }); 

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

Answer 1

你circleBg阻止指針的事件，你只需要讓他們直通，

.teamCircleBg{ 
    fill: #707070; 
    fill-opacity: 0.2; 
    pointer-events: none; 
} 

https://jsfiddle.net/neppanj5/3/