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

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

棒グラフ、円グラフと同じくらいよく見るのが折れ線グラフです。体重や為替相場など継続的に変化するデータを把握する時に使われます。円グラフはD3.jsに用意されたレイアウト機能を利用しましたが、折れ線グラフの場合はレイアウト機能は用意されていません。

折れ線グラフを表示するには。D3.jsのレイアウト機能を利用するのではなく、SVGの連続線を利用します。この連続線という物をどの座標ん位表示するかをプログラミングします。

まずはサンプルコードを実行して説明した方が良いと思います。

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

折れ線グラフを表示するには。D3.jsのsvgオブジェクトに用意されているd3.svg.line()メソッドを使います。d3.svg.line()メソッドは2点間の座標を結ぶ処理を行います。表示する線はd3.svg.line()としただけではエラーで表示されません。d3.svg.line()メソッドにはx(),y()()メソッドと使って表示する座標値を指定する必要があります。

データセットのデータから座標を返すようにするには、x(),y()メソッドに関数を指定します。メソッドに関数を指定する方法は、今までの記事で紹介してきた方法と同じです。関数にはデータとデータの出現順番が渡されます。なお、折れ線グラフも縦棒グラフと同様に、svg要素の高さからデータの値を減算しないと上下が逆になって表示されます。

コメント

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