javascript - D3.jsは棒グラフのテキストを棒でグループ化しました

Question

この例をベースとして使用し、列（65年以上、45〜64年、....）をバー自体にテキストにするか、x軸の状態の下に2番目のラベルを付ける必要があります。

比較的簡単なはずですが、わかりません。簡単にできる場合は、異なる色のバーは必要ありません。1つのグループの各バーにパディングを追加し、特定のしきい値を超えるかどうかに応じて色を付けます。

したがって、画像内のこれら2つのグループ化されたバーの1つのように見えるはずです。

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位置と回転を微調整する必要がある場合があります。