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

你的{'classifications': [ { 'sports': [ {'soccer':[{'coach':'John'}]} {'tennis':[{'coach':'Peter'},{'coach':'Paul'}]} ] }, ] }阻止了指针事件，你只需要让它们直通，

<div  *ngFor="let sport of myobj.classifications[0].sports;let i = index;">
{{sport}}
</div>

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

D3鼠标悬停不起火

1 个答案: