*

JSONみたいなデータを読み込んでグラフにする

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

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

今回紹介するのも複数の線グラフを表示するものですが、データセットの書き方が違います。今回はJSON形式のデータで線グラフを表示します。
下記は、前回の記事の配列データを、JSON形式にしたデータです。

var arrData = [
{ year : 2006, value1 : 12, value2 : 92, value3 : 47 },
{ year : 2007, value1 : 42, value2 : 67, value3 : 73 },
{ year : 2008, value1 : 70, value2 : 55, value3 : 79 },
{ year : 2009, value1 : 55, value2 : 45, value3 : 51 },
{ year : 2010, value1 : 66, value2 : 36, value3 : 34 },
{ year : 2011, value1 : 32, value2 : 51, value3 : 89 },
{ year : 2012, value1 : 8 , value2 : 23, value3 : 9 },
{ year : 2013, value1 : 20, value2 : 59, value3 : 26 },
{ year : 2014, value1 : 29, value2 : 80, value3 : 37 },
{ year : 2015, value1 : 60, value2 : 47, value3 : 54 }
];

上記の場合は、arrData配列の要素番号を指定することができません。
サンプルコードのdrawGraph関数を修正します。
下記は、value1という名前の項目をグラフデータを表示します。

drawGraph( arrData,”value1″, “red” ,”linear”);

その場合、x()メソッド、y()メソッドに指定した関数に渡されるデータは下記の通りです。

{ year : 2006, value1 : 12, value2 : 92, value3 : 47 },

オブジェクトとして渡されるので、d.value1と書いて、参照することができます。
drawGraph関数にはオブジェクトに加えて文字列もパラメーターとして渡されています。このときは、d[“value1″]のようにして、連動配列形式で指定しなければなりません。
ということは、d[ ]添字にdrawGraph関数にワタアされたパラメーターを指定すればデータの値を読み出せます。

return svgHeight – ( d[ itemName ] * scale ) – offsetY;

スポンサードリンク

関連記事

D3.js

CSVファイルからデータを読み込んで縦棒グラフを表示してみる

CSVファイルからデータを読み込んで表示するものを今回作成します。 サンプルコードの実行結果は

記事を読む

D3.js

ヒートマップをCanvasに表示する

前回の記事のヒートマップはSVGを用いて描画しました。ウェブブラウザではSVG以外にもピクセル単位で

記事を読む

D3.js

折れ線グラフを塗りつぶす

D3.jsでは両機内にを塗りつぶしたグラフを表示することができます。このとき、d3.svg.line

記事を読む

D3.js

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

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

記事を読む

D3.js

d3.jsでJSONファイルを読み込む

JSON形式は複雑なXML形式と比べてシンプルで、データ容量も少なくて すむので、ウェブでよく利用

記事を読む

D3.js

データの削除

データの削除処理を書いていきます。前回の記事のサンプルコードだとデータ数と要素数が一致するときのみ適

記事を読む

D3.js

JSONデータを読み込んで、ボタンでパックレイアウトで表示するデータを切り替える

今回は、JSONデータを読み込んでパックレイアウトをまず表示します。そのうえでHTMLファイル上に3

記事を読む

D3.js

汎用的なグラフを作成する

グラフのサイズなど前回の記事では、コード内を色々な箇所を修正しました。毎回それをやると大変なので、修

記事を読む

D3.js

マウスイベントでグラフを変化させる

D3.jsでは要素にイベントを設定することができます。この記事ではマウスカーソルが棒に重なったとき・

記事を読む

D3.js

マウスイベントでグラフの色を変更する

前回のまでの記事で、HTML上にあるボタンをクリックして グラフを変化させました。D3.jsではS

記事を読む

スポンサードリンク

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 ↑