LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

12
--
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.js v4でTree図を作成する (3) | main | D3.js v4で利用可能なカラーマップ一覧 >>
D3でマウスイベントを使う
0

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

     

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

     

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

     

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

     

     

     

    JUGEMテーマ:JavaScript

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