如何使用 D3.js 在鼠标悬停时在条形图上显示标签？

Question

我用 D3.js 绘制了水平条形图。每个条形都有一个标签，并且条形会在鼠标悬停时改变颜色。标签可见性最初设置为隐藏。

var bars = gw2.selectAll(".bar")
        .data(data)
        .enter()
        .append("g")
    //append rects
    bars.append("rect")
        .attr("class", "bar")
        .attr("id", function(d) { return d.country+"_bar"; })
        .attr("y", function(d) { return y2(d.country); })               
        .attr("height", y2.bandwidth())
        .style("filter", "url(#drop-shadow-h)")
        .attr("width", function(d) { return x2(d.value); });        
    //add a value label to the right of each bar
    bars.append("text")
        .attr("class", "textlbl")
        .attr("id", function(d) { return d.country+"_lbl"; })
        .attr("fill", "#404040")
        .attr("x", function(d) { return x2(d.value) - 5 })
        .attr("y", function(d){ return y2(d.country) + (y2.bandwidth()/2); })
        .attr("dy", ".35em") //vertical align middle
        .style("text-anchor", "end")
        .text(function(d){ return (d.value); });    

.textlbl {       
   font-size: 0.7rem;
   font-weight: bold;
   visibility: hidden;
}

我希望，除了鼠标悬停上单个条的颜色变化外，相应的标签也将可见性更改为 'visible'。单条如下：

<g>
    <rect class="bar" id="Greece_bar" y="149" height="14" width="230" style="filter: url(&quot;#drop-shadow-h&quot;);"></rect>
    <text class="textlbl" id="Greece_lbl" fill="#404040" x="225" y="156" dy=".35em" style="text-anchor: end; visibility: hidden;">56.6</text>
</g>

我尝试了不同的解决方案，但它们都不起作用。首先，使用 'selectAll'，但它会选择所有条形图和所有标签，而不仅仅是带有鼠标悬停的条形图：

gw2.selectAll(".bar")
    .on("mouseover", function(d){               
        d3.selectAll(".textlbl").style("visibility", "visible");
    });

然后我尝试使用 'this'，但我无法获得选择器 'textlbl' 和代码 returns 错误“'[object SVGRectElement]+.textlbl'不是有效的选择器。

gw2.select(".bar")
    .on("mouseover", function(d){               
        d3.select(this+"+.textlbl").style("visibility", "visible");
    });

有什么建议吗？

Answer 1

也许这样就可以了。

在d3你不能select兄弟姐妹，先去parent

gw2.select(".bar")
    .on("mouseover", function(d){               
        d3.select(this.parentNode).select('.textlbl').style("visibility", "visible");
    });

Answer 2

已修复。它适用于 selectAll

gw2.selectAll(".bar")
    .on("mouseover", function(d){               
        d3.select(this.parentNode).select('.textlbl').style("visibility", "visible");
});

如何使用 D3.js 在鼠标悬停时在条形图上显示标签？

How to show labels on a barchart on mouseover with D3.js?

javascript

label

mouseover

d3.js