スポンサーリンク
スポンサーリンク

ボタンをクリックして、折れ線グラフの表示範囲を変える

JSONファイルからデータを読み込んで折れ線グラフを表示します。グラフのデータの読み込みは10年分のみにします。

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

サンプルコードについて・・・

指定された範囲のデータをピックアップしてみる

今回用意して利用するデータは、表示する範囲より多いデータです。10年分だけを選択すchooseGraphData関数を作成します。chooseGraphData関数で選択した範囲のデータを抜き出して、それをデータセットとします。

ボタンがクリックされた時の処理

ボタンをクリックされたら表示開始年数を変更して、新たな折れ線グラフを表示する処理をするようにします、ボタンクリック時の処理はd3.select()メソッドでイベントを起こす要素を選択し、on()メソッドでイベントを設定します。「前へ」ボタンをクリックされた時、前のデータを表示できるなら現在表示中の年数を1減算します。反対に、「次へ」ボタンがクリックされたなら、現在表示中の年数を1加算します。

年数を調べる時にyear[0]はJSON形式のデータから最大値・最小値を求めた結果が格納されている変数です。配列から最大値・最小値を求めたいときは、d3.extent()メソッドを使います。データが配列ではない場合は、d3.extent()メソッドの2番目のパラメーターに関数を指定することで、色々なデータに対応できます。関数には配列のデータが渡されるので、今回のデータ形式では下記のようにオブジェクトのプロパテイ名を参照できます。

コメント

タイトルとURLをコピーしました