D3.js在条形图上分组条形图文本

Question

我使用this example作为基础，需要将列（65岁及以上，45至64岁，......）作为条形本身的文本或下面的第二组标签x轴上的状态。

我想这应该相对简单，但我无法弄清楚。如果它变得更容易，我不需要不同颜色的条形图，我在一组中的每个条形图中添加了填充，并根据通过某个阈值的值对它们进行着色。

因此它应该看起来像image

中的这两个分组栏中的一个

Answer 1

您可以通过添加text元素来实现此目的，方法与添加条形图本身的方式相同。代码看起来像这样。

state.selectAll("text")
  .data(function(d) { return d.ages; })
.enter().append("text")
  .attr("x", function(d) { return x1(d.name); })
  .attr("y", function(d) { return y(d.value); })
  .attr("transform", "rotate(90)")
  .text(function(d, i) { return ageNames.slice()[i]; });

您可能需要调整x / y位置和旋转以正确对齐标签。