*

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

公開日: : 最終更新日:2016/02/27 D3.js ,

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

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

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

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

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

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

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

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

スポンサードリンク

関連記事

D3.js

D3.jsで縦棒グラフを表示してみる

グラフの中でも使用頻度が高いのが縦棒グラフです。これまでの記事では横棒グラフを表示しましたが、原理は

記事を読む

D3.js

ツリーマップレイアウトの階層構造をアニメーションをつけて表示する

ツリーマップレイアウトは、それぞれのノード全体に占める割合を把握することに向いています。たとえば、日

記事を読む

D3.js

グラフをアニメーションさせる

前回の記事でデータセットに応じてグラフに変化を付しました。 ボタンをクリックするとすぐに書き換わっ

記事を読む

D3.js

ヒートマップを作成する

ヒートマップはウェブページで多くクリックされた箇所や、地面や人体の温度変化を把握したいときに使われま

記事を読む

D3.js

D3.jsでSVG図形を作成してみる

ページ内にdiv要素の中にsvg要素およびSVG図形の1つであるrect要素を 生成します。svg

記事を読む

D3.js

折れ線グラフを作ってみる

棒グラフ、円グラフと同じくらいよく見るのが折れ線グラフです。体重や為替相場など継続的に変化するデータ

記事を読む

D3.js

D3.jsでメソッドチェーンで独自処理をする

メソッドチェーンに渡されている要素について独自の処理を行いたいとき、call()メソッドです。cal

記事を読む

D3.js

フィッシュアイプラグインを使ってみる

今回は、マウスカーソルを重ねたときに、マウスカーソルを中心にして拡大するフィッシュアイプラグインを利

記事を読む

D3.js

円グラフを作る

日頃のグラフの中でよく見かけるのが円グラフです。スマートフォンの販売シェアとかを表す時に使われます。

記事を読む

D3.js

折れ線グラフの縦方向の動きを分かりやすくする

縦方向の表示を2倍に、目盛り(縦、横軸)を表示する グラフの変化を大きく見せるために縦方向の表示を

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑