javascript - D3 鼠标悬停不触发

Question

我正在使用 D3 版本 3，并且遇到鼠标悬停事件问题。

如下面的代码所示，我将圆弧和圆元素分组。当我将鼠标悬停在其中一个上时，我想突出显示两者(即，如果我将鼠标悬停在 teamCircle 上，那么我希望 teamCircle 和 teamArc 都有黑色描边)。

这对于圆弧来说效果很好，但由于某种原因，完全相同的代码不适用于圆。控制台没有记录日志，所以就好像它根本没有触发一样。有什么想法吗？

更新:请参阅此处的 fiddle :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/