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

外部ファイルを読み込んで円グラフを表示させる

CSVデータを読み込んでグラフを表示させてみます。

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

CSVファイルを読み込んでグラフを表示する方法は、縦棒グラフを表示させた時と同じです。d3.csv()を利用して読み込んで、円グラフを表示します。データセットは縦棒グラフのときと違いラベルは使いません。なので下記のように変数arrDataにはじめの1行のデータを代入するだけです。

var arrData = [];
for( var i in data[0] ){
arrData.push( data[0][i] );
}

今回は複数のCSVファイルのデータを読み込むためCSVファイル読込円グラフを表示させるまでをdrawPieという関数にしています。この関数は読み込むCSVファイル名を渡します。サンプルコードのように「drawPie(“graphData2012.csv”);」と書けばgraphData2012.csvファイルを読み込んで円グラフを作成します。

今度はセレクトメニューの処理です。セレクトメニューにはID「year」と付けているので、
d3.select(“#year”)と書けばアクセスすることが可能です。このセレクトメニューが選択されたら(選択内容が変化したら)対応するCSVファイルを関数drawPieのパラメータとして渡します。選択された項目の値は、this.valueで取得できます。なので
drawPie(“graphData” + this.value + “.csv”,this.value); と書いています。

円グラフを表示する前に、svg要素内のtext要素やpath要素を全て削除します。これを忘れるとグラフの2回目以降表示するときに、以前のグラフが消えず重なて表示されてしまいます。svg要素内の全ての要素を指定するには以下のようにします。

d3.select(“#graph”).selectAll(“*”).remove();

コメント

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