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.js v4でTree図を作成する (2) | main | D3でマウスイベントを使う >>
D3.js v4でTree図を作成する (3)
0

    D3.jsを使う魅力は、なんといってもユーザの操作に従ってダイナミックに動くグラフを作成できるという点です。というわけで、前回までに作成した「静的なツリー図」を、インタラクティブに動く「動的なツリー図」にしてみましょう。

     

    以前作成したサンプルと同様に、対象となる html 内のプルダウン要素を指定して、その要素がユーザによって更新されたときにツリー図を更新するようにしました。具体的には、44行目でプルダウン要素を指定したうえで、その要素がユーザ操作によって更新されたときの動作を99行目以降で設定しています。更新処理のなかでは、(1) ノードの位置、(2) エッジの端点、(3) テキストの透明度 のそれぞれを更新しています。ここでは、前回説明したd3.hierarchy()メソッドで生成されたオブジェクトのうち、階層の深さを示す depth の値を参照することで、これら3つの更新処理を実現しています。

     

     

    JUGEMテーマ:JavaScript

    このエントリーをはてなブックマークに追加
    | D3.js | 22:29 | comments(0) | - | - |
    スポンサーリンク