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位置和旋轉到正確對齊的標籤。