LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

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

MATLABやPythonとともにD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
<< D3.js v4で利用可能なカラーマップ一覧 | main | D3.js v4によるデータバインド (2) >>
D3.js v4によるデータバインド (1)
0

    D3.js の大きな特徴は、データをSVGエレメントにバインドできるという点です。といっても、最初はなかなか実感がわかないと思うので、まずは下記のサンプルコードを例に見ていくことにしましょう。

     

    下記のサンプルコードでは、まず20個の要素を持つ配列をサンプルデータとして作成しています(15行目)。そのうえで、23~26行目で、データの個々の要素をSVGのrectエレメントとバインドしています。ここで、バインドの仕方として、データの個々の数値をキーにrect要素とバインドしていることに注意して下さい(24~26行目)。

     

    次に、29~36行目では、データに含まれる要素のうち、既に表示しているSVGのrect要素とバインドされているものについて、rect要素の属性をアップデートしています。ここでは、30行目でtransitionメソッドを加えることで、アップデートの様子をアニメーション表示しています。

     

    次の39~58行目では、データに含まれる要素のうち、既に表示しているSVGのrect要素とバインドされていないものについて、新たにrect要素を追加しています。ここでも、ただrect要素が追加されるだけでは面白くないので、52行目にtransitionメソッドを加えて、rect要素が追加される様子をアニメーションで表示しています。

     

    最後の61~65行目では、既に表示しているSVGのrect要素のうち、データに含まれない要素とバインドされているものをSVGから削除しています。ここでもまた、transitionメソッドを使って削除される様子をアニメーションで表示しています。

     

    69行目は、初期状態として20個の要素を持つ配列dataSetをデータとして、rect要素とバインドしたうえでSVGとして表示しています(この時点では、41行目によってすべてのrect要素のclassは "enter" になっています)。

     

    72~77行目では、2秒(=2000ミリ秒)ごとにデータ配列dataSetをシャッフルのうえランダムな個数だけ選択して、これを新たなデータとしてSVGを更新しています。

     

     

    上記のプログラムでおこなったJoin, Update, Enter, Exit, Removeという一連の流れはD3.js v3と同じです。しかしv4からは、新たにmergeというメソッドが追加されました。次回は、このmergeメソッドを使うと、上記のプログラムのEnterとUpdateの部分がいっぺんに書けるということを紹介します。

     

    JUGEMテーマ:JavaScript

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