html - d3 + 在条形图中定位数据标签 + 顶部、中间、底部、中心

Question

这是我的fiddle ，我正在用它来构建 example

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

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. 并且始终位于酒吧中央

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

这是我的尝试，但是有更好/其他的方法吗？

//出现在中心(条形图的 x 轴)，但仅在本例中不确定它的动态程度

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

//标 checkout 现在栏稍上方

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

---

编辑1

查看this可能对我有用

这是我的代码和 fiddle将矩形和文本放入 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", 高度)

4. 栏的中心: .attr("y", function(d) { return y(d.Frequency/2); })

DEMO

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

text.barText { 文本 anchor :中间； }

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