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