如何正确获取文本的宽度，以中心上方图形栏标签？(How to properly get text w

我现在有具有关联栏值显示每个条上方的曲线图，但我有困难定心值标签时，由于不能够提取每个文本元素的宽度。

这是怎么我的图表此刻绘图：

所有我需要做的就是减去每个文本元素的宽度的一半，但我似乎无法用下面的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))

有没有办法，我可以访问每一个文本元素的宽度属性设置一个值，以抵消的方式？

Answer 1:

你可以得到文字的边界框，并使用这些值来应用转换到居中。 用于获取边界框的一个例子是在这里 。 该代码看起来是这样的

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

Answer 2:

也许一个更简单的方法是使用text-anchor的middle有x集酒吧，加上酒吧的一半宽度的左侧：

svg.selectAll(".bar-label")
  .data(data)
.enter().append("text")
  .text((d)-> d.Total)
  .attr("class", "bar-label")
  .attr("text-anchor", "middle")
  .attr("x", (d)-> x(d.Year) + x.rangeBand()/2)
  .attr("y", (d)-> y(d.Total) - 5)

文章来源: How to properly get text width to center labels above graph bars?