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)+"%"; });

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

在栏顶上
栏的底部
并且始终位于酒吧的中心

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

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

//显示为中心（x轴的中心），但仅在此示例中不确定它的动态性如何

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

//标签显示在栏上方

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

的 EDIT1

对我来说，通过this

这是我的代码，fiddle将rect和text放在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

： .attr("y", function(d) { return Math.min(y(d.frequency) + 10, height); })
： .attr("y", function(d) { return y(d.frequency); })
栏的底部： .attr("y", height)
酒吧中心： .attr("y", function(d) { return y(d.frequency/2); })

DEMO

要水平对齐，请使用text-anchor: middle，并将文字与条形对齐，如下所示：

text.barText { text-anchor: middle; }

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

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

的 EDIT1

1 个答案: