SELECTED ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

04
--
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
--
>>
<<
--

Agata's Blog

Python+pandasとD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
<< D3.jsによるパックレイアウトの作成 | main | D3.jsを使った時計 >>
クリックした位置から広がる波紋
0
    JUGEMテーマ:JavaScript

    これまで見てきたように、D3.jsにはSVG要素を操作するメソッドを中心に、DOMを操作するいろいろなメソッドが用意されています。これらのメソッドは、データを可視化する以外の用途にも使うことができます。そこで今回は、画面上でクリックした場所から同心円が次々と広がるというプログラムを作成して、マウスの位置座標を取得する方法などについて見てゆくことにしましょう。

    D3.jsでは、d3.mouse() というメソッドを使ってマウスの位置座標を取得することができます。また、クリックなどのイベントをトリガに処理を開始する on() というメソッドがあります。トリガの指定には、click、mouseover、mousemove、mouseout などが用意されています。この2つのメソッドを使って、クリックした場所から波紋が広がるプログラムを書いてみました。
    var svg = d3.select("#MyGraph");
    
    // マウスの位置座標を表示
    var positionLabel = svg.append("text")
      .attr("x", 10)
      .attr("y", 20);
    
    // マウスの位置座標を取得
    svg.on("mousemove", function(){
      positionLabel.text(d3.mouse(this));
    });
    
    // クリックした場所から広がる同心円をアニメーション表示
    svg.on("click", function(){
      for (var i = 1; i < 6; i++){
        var position = d3.mouse(this);
        var circle = svg.append("circle")
          .attr("cx", position[0])
          .attr("cy", position[1])
          .attr("r", 0)
          .style("stroke", "blue")
          .style("stroke-width", 5/(i))
          .style("fill-opacity", 0)
          .transition()
          .delay(Math.pow(i, 2.5)*20)
          .duration(2000)
          .ease("quad")
          .attr("r", 400)
          .style("stroke-opacity", 0)
          .each("end", function(){
            d3.select(this).remove();
          })
      }
    })
    
    サンプルページ

    9〜11行目では、マウスの動きをトリガとしてマウスの位置座標を取得しています。取得した位置座標は、4〜6行目で指定した場所にテキストとして表示しています。また14行目以降では、こんどはクリックをトリガとして、先に取得したマウスの位置座標から5つの同心円が広がるアニメーションを描画しています。最後に、アニメーションが終わったら、30行目以降でSVG要素を削除するようにしています。
    このエントリーをはてなブックマークに追加
    | D3.js | 20:42 | comments(0) | - | - |
    スポンサーリンク