D3.js

縦棒グラフに目盛りを表示してみる

縦棒グラフにグラフの目盛りを表示します。まずは目盛りのスタイルをHTMLファイル内でしてします。必要な情報は目盛りに表示する文字列とフォント、目盛りの線の色です。

サンプルコードの実行結果はこちら

目盛りの間隔を指定したい

目盛りの間隔(目盛り区切りの間隔の数値)はticks()メソッドで指定することができます、初期値は10です。サンプルコードでは特に間隔は指定していないので10間隔です。
サンプルコード(test.js)のコメントアウトされている箇所57行のコメントを消して実行すると20間隔に変更されます。

目盛りを異なる間隔にしたい

上記のticks()メソッドで指定すると、全て指定した値と同じ間隔になります。
これを異なる間隔にしたいときは、tickValues()メソッドを使います。
パラメーターには愛列で設定したい数値を指定します。
サンプルコード(test.js)の58行目です。

目盛りに表示する数値の書式を変更する

目盛りに表示する数値の書式を設定できます。設定するには、tickFormat()メソッドを利用します。パラメーターには関数を指定して、戻り値などを書きます、D3.jsでは数値・日時の書式を設定するd3.format()メソッドがあり、tickFormat()メソッドのパラメーターとして設定できます。サンプルコード(test.js)の58,59行目のコメントアウトを消して実行すると確認できます。

-D3.js
-