D3 Mouseover nicht feuern

Question

Ich arbeite mit D3 Version 3 und habe ein Problem mit Mouseover-Ereignissen.

Wie im folgenden Code zu sehen, habe ich Elemente aus Kreisen und Kreisen gruppiert. Ich möchte beide hervorheben, wenn ich über eine von ihnen schwebe (d. H., Wenn ich über die teamCircle schwinge, dann möchte ich sowohl die teamCircle als auch die einen schwarzen Strich haben).

Dies funktioniert gut für die Bögen, aber aus irgendeinem Grund funktioniert der exakt gleiche Code nicht auf den Kreisen. Die Konsole protokolliert nicht, es ist also so, als ob sie überhaupt nicht abfeuert. Irgendwelche Ideen?

UPDATE: Sehen Sie die Geige hier: 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

Ihre circleBg wird der Zeiger Ereignisse blockiert, müssen Sie sie nur lassen Passthrough,

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

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