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

D3.jsで外部データを読み込む

前回までは、予めプログラム内に書かれた数値を
もとにして棒グラフを表示しました。
実際にD3.jsを使う場合はプログラム内にデータを用意して
おくというのはまずないと思います。多くの場合は、
データは別ファイルを用意されています。

D3.jsではXML,JSON,TSV,CSVなど、色々なデータタイプに対応して
います。独自の形式でも大丈夫です。ファイルの詳しいやり方は
別の機会にします。

今回はCSV(カンマ区切りテキスト)ファイルを読み込んで
棒グラフを表示します。

test.csvの中身
item01,item02,item03
50,60,80
100,180,40
70,40,140
190,120,40
80,160,320

D3.jsでCSVファイルを読み込むにはd3.csv()メソッドを使います。
第1引数にはファイルのパスを指定し、第2引数にはCSVファイルの
読込が完了したときに読み出す関数を指定します。
この読み込みが完了したときに呼ばれる関数の
第1引数には、エラー情報
第2引数には、読み込まれたデータ(オブジェクト)が渡されます。

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

コメント

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