グラフを一切書かないD3.js勉強会を開催しました。
先週、土曜日に「グラフを一切書かないD3.js勉強会」を行いました。
第一部の内容は、FOSS4G 2014 Hokkaidoの内容と同じものを行ったのでそれはいいとして、第二部の方は……正直準備不足だったかなと。
一番の問題は、使おうとしていたCodepenのプロフェッサーモードが現場では重くて使えなかったことですかね。
そのため、直前になってワタワタしてしまい軽くパニック！ 急遽、別の方法で説明を行ったわけですが、遠くの席にいた方にはプロジェクターではコードが見えづらかったと思います。
やはり事前に現場での確認が必要だなーと思いました。
（できればリハーサルなんかもやった方が良いのかも）
とりあえず第二部で使った資料を掲載しておきます。
資料
D3.jsは「束縛したデータセットエレメントの差分を操作するってイメージすると理解しやすいですよー」ということが言いたかったのですが、ちゃんと伝えられた感じがしません orz
とりあえず、サンプルコードとか弄ってもらえると多少分かりやすいかも。
文字が読み辛いのでフルスクリーンでご覧ください。
サンプルコード
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<body> <h3>順番に実行→</h3> <button id="enter_append">binding:dataset1 enter.append</button> <button id="update">update</button> <button id="binding_dataset2">binding:dataset2 update</button> <button id="exit_update">exit.update</button> <button id="exit_remove">exit.remove</button> <div id="stage"> <p>test1</p> <p>test2</p> </div> <script> var dataSet1 = [ {id:1, label:"hoge", value:100}, {id:2, label:"hello", value:200}, {id:3, label:"wold", value:300}, {id:4, label:"fuga", value:400}, {id:5, label:"ora", value:500}, {id:6, label:"muda", value:600} ] var dataSet2 = [ {id:1, label:"hoge", value:100}, {id:2, label:"hello", value:200}, {id:4, label:"fuga", value:400}, {id:5, label:"ora", value:500}, {id:6, label:"muda", value:600} ] var div = d3.select("#stage"); /* * データセット１に対して足りないエレメントを追加 */ d3.select("#enter_append").on("click", function(){ div.selectAll("p") .data(dataSet1) .enter() .append("p") .text(function(d){ return d.label }); }); /* * 束縛されているデータを元にエレメントのスタイルをアップデート */ d3.select("#update").on("click", function(){ div.selectAll("p") .style("background-color", "red") .style("color", "white") .text(function(d){ return d.label }); }); /* * データセット２をエレメントに束縛しアップデート */ d3.select("#binding_dataset2").on("click", function(){ div.selectAll("p") .data(dataSet2, function(d){ return d.id }) .style("background-color", "blue") }); /* * データセット２に対し多すぎるエレメントのスタイルをアップデーと */ d3.select("#exit_update").on("click", function(){ div.selectAll("p") .data(dataSet2, function(d){ return d.id }) .exit() .style("background-color", "green") }); /* * データセット２に対し多すぎるエレメントを削除 */ d3.select("#exit_remove").on("click", function(){ div.selectAll("p") .data(dataSet2, function(d){ return d.id }) .exit() .remove(); }); </script> </body> |
備考
勉強会にていただいた質問に関する記事を書きました。
[SVG]ドーナツ状のcircleを描画する。
