D3 Mouseover Not Firing

Question

I am working with D3 version 3 and am having an issue with mouseover events.

As seen in the code below, I have grouped arc and circle elements. I would like to highlight both when I hover over one of them (ie, if I hover over the teamCircle then I want both the teamCircle and the teamArc to have a black stroke).

This works well for the arcs, but for some reason the exact same code does not work on the circles. The console is not logging so it is as if it is not firing at all. Any ideas?

UPDATE: See the fiddle here: 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

Your circleBg is blocking the pointer events, you just need to let them passthrough,

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

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