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

Question

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

我知道如何更改第一个或全部，但对应的一个的颜色。

到目前为止， 这是代码。 突出显示的行如下：

           .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");

这是您的小提琴： https : //jsfiddle.net/d6839s03/

PS：您的mouseout功能使所有内容变灰。

Answer 2

您可以像这样过滤正确的路径：

d3.selectAll(".donutArcSlices").filter(function(e, j){ return i === j}).style("fill", "#007DBC");

参见https://jsfiddle.net/o98b8fsj/

Answer 3

对Gerardo的回答真棒。 任何使用D3js v5进行尝试的人都可以使用相同的基础概念。 我正在将D3js V5 + Angular 6与以下代码段结合使用-

1. 将id属性添加到要操作的节点或任何其他元素-

   this.svg.append('g').attr('id' ,(d,i)=>'elementname'+i)

2. 然后只需在您选择的d3js事件上进行更改-

   .on('mousehover', (d,i)=> d3.select('#elementname'+i).style('fill','red') .on('mouseout', (d,i)=> d3.select('#elementname'+i).style('fill','black')