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);   
            });

如果我添加第一行注释，当我悬停在弧形中的任何文本上时，第一条弧形会更改颜色。如果我删除第二行注释，则在悬停在任何文本上时所有弧形都会更改颜色。

- MorganFR

---

两个答案都很好，我会让社区决定哪一个应该被接受为答案。 - MorganFR

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函数使一切都变成了灰色。

- Gerardo Furtado

---

是的，mouseout 没有完全实现，因为它使用了同样的功能。 - MorganFR

Answer 2

对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')

- Dragonknot

Answer 3

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

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

请看：

查看https://jsfiddle.net/o98b8fsj/

- Tim B