D3.js講習会〜２回目〜

1. D3.js講習会
∼２回目∼

2. Githubから
D3js_lecture
をダウンロードしてね

3. 使用環境は
Google Chrome
Sublime Text 2

4. 本日の内容

5. Today s Goal
update, enter, exit について理解し
活用できるようになること

6. Review
• データバインディングについて学習
• D3.jsを使って棒グラフを作成

7. Review
• D3js_lecture/02/step01.html を開いてください

8. Review
• D3js_lecture/02/step01.html を開いてください

9. Review
dataset を
バインディング
要素を追加するappendメソッド

10. Question
存在しないものを
なぜ選択できる？
これに，どんな意味があるのか？

11. selectAll メソッド
• 引数で指定した要素を全て選択するメソッド
htmlファイル
rect
rect
rect
selectAll( rect )

12. selectAll メソッド
• 引数で指定した要素を全て選択するメソッド
htmlファイル
rect
rect
rect
rectは3つあります

13. selectAll メソッド
htmlファイル
selectAll( rect )
rectがなければ…？
• 引数で指定した要素を全て選択するメソッド

14. selectAll メソッド
• 引数で指定した要素を全て選択するメソッド
htmlファイル
rectは０つあります

15. data メソッド
• データを選択した要素にバインディング
htmlファイル
data(dataset)
データを3個
バインディングすると仮定

16. data メソッド
• データを選択した要素にバインディング
htmlファイル
バインディングする
要素がないです
データを3個
バインディングすると仮定

17. enter メソッド
• データに対して要素が不足している場合，
不足した分に対して処理を適応できるメソッド（ポイント）
htmlファイル
enter()

18. enter メソッド
htmlファイル
３つ分不足しています
• データに対して要素が不足している場合，
不足した分に対して処理を適応できるメソッド（ポイント）

19. append メソッド
• 引数で指定した要素を追加するメソッド
htmlファイル
append( rect )

20. append メソッド
• 引数で指定した要素を追加するメソッド
append( rect )
htmlファイル
rect
rect
rect

21. 無事rectを追加できた！

22. いや，でも

23. update, exit ?

24. exit メソッド
htmlファイル
• データに対して対応する要素が余っている場合，
余った分に処理を適応できるメソッド（ポイント）
exit()
データを3個
バインディングすると仮定
rect
rect
rect
rect
rect

25. exit メソッド
htmlファイル データを3個
バインディングすると仮定
rect
rect
rect
rect
rect
２つ余っています
• データに対して対応する要素が余っている場合，
余った分に処理を適応できるメソッド（ポイント）

26. remove メソッド
htmlファイル
rect
rect
rect
rect
rect
• 要素を削除するメソッド
remove()

27. remove メソッド
htmlファイル
rect
rect
rect
• 要素を削除するメソッド
２つ削除しました

28. update
htmlファイル
rect
rect
rect
• データに対して対応する要素がある場合，
その要素に対して処理を適応できる（ポイント）
※メソッドではない
attr( fill , green )

29. update
htmlファイル
rect
rect
rect
• データに対して対応する要素がある場合，
その要素に対して処理を適応できる（ポイント）
※メソッドではない
緑色にしました

30. 一旦まとめ
• update
• 対応する要素に処理を適応できる
• enter
• 不足した分に処理を適応できる
• exit
• 余った分に処理を適応できる

31. データを増減させよう

32. 実際にやってみよう！
• D3js_lecture/02/step02.html を開いてください

33. 実際にやってみよう！
1. テキストボックスに「10」と入力してください
2. グラフが表示されたことを確認してください
3. テキストボックスの数字を変更してみましょう

37. データバインディング
• rectを全て選択し，datasetをバインディング

38. update
• 対応する要素がある場合は，再描画する

39. enter
• 要素が不足している場合，新たに追加して描画する

40. exit
• 要素が余っている場合，それを削除する

41. 今日のポイント
update, enter, exit

42. 次週は
軸の作成
について学びます

43. 参考資料
!
• ドットインストール：D3.js入門
• http://dotinstall.com/lessons/basic_d3js
• d3.js - 三つの小円
• http://ja.d3js.node.ws/document/tutorial/circle.html
• 【D3.js】超基本！ コンソールでselect,data,enter
メソッドを理解する。
• http://shimz.me/blog/d3-js/2619
• Scott Murray, 長尾高弘(訳): インタラクティブ・
データビジュアライゼーション, オライリー・ジャッパン