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

我希望，除了在裁切器上更改单个条形的颜色外，相应的标签还将可见性更改为“可见”。单条如下：

<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'，并且代码返回错误“'[object SVGRectElement] +。textlbl'不是有效的选择器”。

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

有什么建议吗？

Answer 1

已修复。它适用于selectAll

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

Answer 2

也许会的。

在d3中，您无法选择同级，请先转到父级

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

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

2 个答案: