[解決済み] d3軸ラベリング

質問

d3の軸にテキストラベルを追加するにはどうすればよいですか？

例えば、x軸とy軸の単純な折れ線グラフがあります。

x 軸には 1 から 10 までの目盛りを付けました。x軸が日数を数えていることがわかるように、その下に"days"という単語を表示させたいと思います。

同様に、Y軸には1から10までの数字を目盛りにし、"sandwiches eaten"という文字を横向きに表示させたいと思います。

簡単な方法はないでしょうか？

どのように解決するのですか？

軸ラベルはD3に組み込まれていません。 軸コンポーネント には組み込まれていませんが、SVG を追加するだけでラベルを追加することができます。 text 要素を追加するだけです。この良い例が、Gapminderのアニメーションバブルチャートを私が再現したものです。 国家の富と健康」(The Wealth & Health of Nations) . X 軸のラベルはこのようになります。

svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height - 6)
    .text("income per capita, inflation-adjusted (dollars)");

そして、Y軸のラベルはこんな感じ。

svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("life expectancy (years)");

これらのラベルは、スタイルシートを使って好きなようにスタイルを設定することもできます。 .label ) または個別に ( .x.label , .y.label ).