d3.js – 如何在图形条上方正确获取文本宽度到中心标签？

我目前有一个图形,在每个条形图上方显示相关的条形值,但由于无法获取每个文本元素的宽度,我很难将值标签居中.

这就是我的图表当前绘制的方式：

我需要做的就是减去每个文本元素宽度的一半,但我似乎无法使用以下Coffeescript：

#Drawing value labels   
    svg.selectAll("rect")
        .data(data)
        .enter()
        .append("text")
        .text((d)-> d.Total)
        .attr("width",x.rangeBand())
        .attr("x",(d)->
            textWidth = d3.selectAll("text").attr("width")

            x(d.Year) + (x.rangeBand() / 2) - (textWidth / 2)
        )
        .attr("y",(d)-> y(d.Total) - 5)
        .attr("font-size","10px")
        .attr("font-family","sans-serif")

    #Drawing bars       
    svg.selectAll("rect")
        .data(data)
        .enter().append("rect")
        .attr("class","bar")
        .attr("x",(d)-> x(d.Year))
        .attr("width",x.rangeBand())
        .attr("y",(d)-> y(d.Total))
        .attr("height",(d)-> height - y(d.Total))

有没有办法可以访问每个文本元素的width属性来设置一个值来抵消？

解决方法

您可以获取文本的边界框并使用这些值来应用变换以使其居中.获取边界框的示例是 here.代码看起来像

.text(function(d) { return d.Total; })
.attr("x",function(d) {
   return x(d.Year) + (x.rangeBand() / 2) - (this.getBBox().width / 2);
}
...