javascript - D3.js 悬停在另一个元素上时突出显示一个元素

Question

我有一个使用 D3.js 制作的圆环图。我想在将鼠标悬停在相应的文本上时更改圆弧的颜色。

我知道怎么改变第一个，或者全部，但是对应的颜色。

Here到目前为止的代码。突出显示的行如下:

           .on("mouseover", function(d,i){
              //d3.select(".donutArcSlices").transition().style("fill", "#007DBC");
              //d3.selectAll(".donutArcSlices").transition().style("fill", "#007DBC");
              div.transition()      
                .duration(200)      
                .style("opacity", .9);      
            div .html(d.name)   
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");
            })
            .on("mouseout", function(d) {       
              d3.select(".donutArcSlices").transition().style("fill", "#3E4750");
              div.transition()      
                .duration(500)      
                .style("opacity", 0);   
            });

如果我添加第一条注释行，当我将鼠标悬停在圆弧中的任何文本上时，第一条圆弧会改变颜色。如果我删除第二行的评论，那么所有的弧线都会在悬停在任何文本上时改变颜色。

Answer 1

给每个路径一个唯一的ID:

.attr("id", function(d,i){ return "donut"+i})

悬停时使用它:

d3.select("#donut" + i).transition().style("fill", "#007DBC");

这是您的 fiddle :https://jsfiddle.net/d6839s03/

PS:您的mouseout 功能使一切变灰。