条形图显示值在顶部

Question

我正在使用mbostock的条形图.代码几乎相同.我没有字母和频率,而是分别有名字和价值.我想在条形图上显示每个数据的值.我试着在最后添加它.

svg.selectAll(".bar").append("text")
                     .attr("x", height/2)
                     .attr("y", function(d) { return y(d.value) - 3; })
                     .text(function(d) { return d.value; });

但这似乎根本不起作用.那我搞砸了什么？

Answer 1

您要附加text到rect元素 - 这在SVG中无效,文本不会显示.而是将这text两者附加到g元素或顶级SVG:

svg.selectAll("text.bar")
  .data(data)
.enter().append("text")
  .attr("class", "bar")
  .attr("text-anchor", "middle")
  .attr("x", function(d) { return x(d.letter); })
  .attr("y", function(d) { return y(d.frequency) - 10; })
  .text(function(d) { return d.frequency; });

在这里完成演示.