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