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

这是你的小提琴：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-

向节点或您要操纵的任何其他元素添加id属性-

this.svg.append('g').attr('id' ,(d,i)=>'elementname'+i)
然后仅在您选择的d3js事件上进行更改-

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

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

3 个答案: