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

Question

我将此示例用作基础，并且需要将列（65 岁及以上，45 至 64 岁，......）作为条形本身的文本或在 x 轴上的状态下方具有第二束标签。

我想这应该相对容易，但我无法弄清楚。如果它更容易，我不需要不同颜色的条，我为一组中的每个条添加填充，并根据是否超过某个阈值的值对它们进行着色。

所以它应该看起来像图像中这两个分组的条之一

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位置和旋转以正确对齐标签。