d3 +条形图+顶部、中部、底部、中心的定位数据标签

Question

这是我的小提琴，我是用这个示例构建的

这是我要添加文本标签的代码

svg.selectAll(".barText")
      .data(data)                                 
      .enter().append("text")
      .attr("class", "barText")
      .attr("x", function(d) { return x(d.letter); })
      .attr("y", function(d) { return y(d.frequency); })
      .text(function(d) { return Math.floor(d.frequency*100)+"%"; });

如何控制标签的位置，使其处于以下位置：

1. 在酒吧里
2. 在酒吧顶上
3. 酒吧的底部
4. 总是站在酒吧的中央

理想情况下，我不想硬编码，只想动态编码。

这是我的尝试，但还有更好的方法吗？

//显示中心(指条形轴)，但仅在本例中不确定它的动态程度

.attr("x", function(d) { return x(d.letter) + x.rangeBand()/5; }) 

//label略高于栏

.attr("y", function(d) { return y(d.frequency) - 10; })

EDIT1

可能对我来说通过这是有用的

这是我的代码和小提琴，用于将rect和文本放在1组中。但是不确定如何用这种方法来控制文本标签对条形的回复，而不是用下面的答案呢？

 //create a bar group for the bar and the labels 
  barGroup = svg.append("g")
                                .attr("class", "barGroup")

  barGroup.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.letter); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.frequency); })
      .attr("height", function(d) { return height - y(d.frequency); });


barGroup.selectAll(".barText")
      .data(data)                                 
      .enter().append("text")
      .attr("class", "barText")
      .attr("x", function(d) { return x(d.letter); })
      .attr("y", function(d) { return y(d.frequency); })
      .text(function(d) { return d.frequency; });

Answer 1

1. 酒吧内部：.attr("y", function(d) { return Math.min(y(d.frequency) + 10, height); })
2. 在酒吧顶部：.attr("y", function(d) { return y(d.frequency); })
3. 酒吧底部：.attr("y", height)
4. 酒吧中心：.attr("y", function(d) { return y(d.frequency/2); })

演示

若要水平对齐，请使用text-anchor: middle，并将文本与栏对齐，如下所示：

text.barText { text-anchor: middle; }

.attr("x", function(d) { return x(d.letter) + x.rangeBand()/2; })