SELECTED ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

07
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--

Agata's Blog

MATLABやPythonとともにD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
D3でマウスイベントを使う
0

    D3の .on メソッドを使うと、ユーザのマウス操作によって表示中のSVG要素を変化させることができます。今回は、.リック、▲泪Ε好ン、マウスアウトの3つイベントそれぞれによって表示中の図形のサイズや色が変化する簡単なサンプルを紹介します。

     

    27行目までは、SVGの描画領域を設定したうえで、サンプルデータの配列とSVG要素をバインドして、配列の個数分だけ図形を作成しています。これまで何度もやってきた操作なので、説明は省略します。

     

    29行目以降の部分が今回のメインです。マウスイベントをキャッチするには、.on メソッドを使います。メソッドの第1引数 ("click", "mouseover" などの部分) は、キャッチするマウス操作の種類を指定しています。そのうえで、指定したマウス操作をキャッチしたときに何をするかを、第2引数に関数として与えています。

     

    ここで、いくつもある図形のうち、マウス操作をした図形だけを変化させたいので、select(this) としてその図形だけをセレクトしています。

     

     

     

    JUGEMテーマ:JavaScript

    このエントリーをはてなブックマークに追加
    | アニメーション | 19:55 | comments(0) | - | - |
    プルダウンメニューを使ってインタラクティブに散布図を更新
    0

      前回・前々回の2回にわたって、D3.jsを使ってCSVデータから散布図を作成する方法と、x,y軸のスケールをデータにあわせてインタラクティブに変更する方法を、それぞれ紹介しました。今回はこの2つの方法を合体させて、ユーザがプルダウンから選択した変数によって散布図が自動的に変化するページを作ってみます。

       

      読み込むデータとしては、再びIrisデータセットのCSVファイルを使います。このIrisデータセットには4個の変数が含まれています。そこで、この4個の変数から2つをユーザがプルダウンメニューから選択すると、それに従って画面上の散布図が変化するようにしてみました。

       

      Javascriptファイルの78行目までは、前々回にお話したCSVデータから散布図を作成するプログラムとほぼ同じです。違っている部分は、18,19行目でそれぞれプルダウンメニューのDOM要素を選択している部分です。81~88行目は、これら選択されたDOM要素 (プルダウン) が変更されたときに散布図を更新するためのコールバック関数を呼び出している部分です。

       

      91行目以降は、このコールバック関数の処理内容です。100~127行目までは x,y軸を更新する部分で、基本的には前回ご紹介した内容と同じです。130行目以降では、プルダウンで選択された変数によって散布図上のデータ点の位置を変更する処理です。

       

       

      JUGEMテーマ:JavaScript

      このエントリーをはてなブックマークに追加
      | アニメーション | 22:50 | comments(0) | - | - |