D3鼠標懸停不觸發

Question

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

如下面的代碼所示，我將圓弧和圓弧元素進行了分組。 當我將鼠標懸停在其中之一上時，我想突出顯示兩者（即，如果將鼠標懸停在teamCircle那么我希望teamCircle和teamArc都具有黑色筆划）。

這對於圓弧效果很好，但是由於某些原因，完全相同的代碼在圓上不起作用。 控制台沒有在記錄日志，因此好像根本沒有在觸發。 有任何想法嗎？

更新：在這里看到小提琴： 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/