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

2次元配列のデータを読み込んで、折れ線グラフを表示する

2次元配列のデータを用意して、少し複雑なデータを読み込んで折れ線グラフを表示してみます。

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

折れ線グラフを描画する時に、データセットして、要素番号を指定して配列データを渡す

drawGraph( arrData[0], “red” ,”linear”); // 折れ線グラフを表示
drawGraph( arrData[1], “blue” ,”step” ); // 折れ線グラフを表示
drawGraph( arrData[2], “green”,”basis” ); // 折れ線グラフを表示

上記のように書くと、x()メソッド,y()メソッドに指定した関数には、以下のデータ(オブジェクト)が渡されます。

{ year : 2006, value : 12 },

前回までの記事にしたグラフだと数値だけだったので、そのままY座標の値を計算することができましたが、上記のようなデータが関数に渡されたときは、D3.jsでは「year」、「value」はオブジェクトのプロパティ名として参照できるようになります。
下記のように、d.valueとするとグラフの表示に必要なY座標の値を読み出すことができます。

return svgHeight – ( d.value * scale ) – offsetY;

コメント

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