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

散布図を作成

散布図は2つの項目の関係性を調べるのに利用します。。D3.jsでは散布図を表示すための専用のレイアウト機能は用意されていないので、SVG図形を作成して、自分で表示するための座標データを作成する必要があります。

折れ線グラフで読み込んデータは表示範囲に収まるようにしてました。ですが、実際のデータは様々な値があり、データ範囲が決まっていることがまずありません。今回はデータの範囲を定めずにデータに応じて調整する方法を書きます。

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

円の場合、cx属性にX座標、cy属性にY座標を指定します。この座標は円を描画するときの中心座標です。cy属性に設定するY座標はsvg要素の高さから減算します。

散布図ををアニメーションさせながら表示してみる

散布図に必要な点を時間経過に伴い動かすアニメーションを作ります。ボタンのクリックの操作によりデータを更新するプログラムはこれまでに作成しました。定期的に更新するにはJavaScriptのタイマーを利用します。一定時間ごとに繰り返し処理をするにはsetInterval()メソッドを利用します。

setInterval()メソッドは1番目のパラメーターに艇規定に呼び出す処理や関数を指定、2番目のパラメーターに繰り返す時間を指定します。時間はミリ秒で指定するので、1000と書けば1秒です。

新たに散布図に設定するデータセットは乱数を利用します。
乱数を生成する処理はgenerateData関数、アニメーションはanimateGraph関数を作成します。
サンプルコードの実行結果はこちら

●HTMLファイルは1つの前のHTMLと同一です。

コメント

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