今回は、JSONデータを読み込んでパックレイアウトをまず表示します。そのうえでHTMLファイル上に３つのボタンを設けて、ボタンを押すと読み込むデータを切り替えてパックレイアウトを表示するコードを書いてみます。
サンプルコードの実行結果はこちら
|
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 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>パックレイアウトで人口を表示する</title> <script src="../js/d3.js"></script> <style> svg{ width:320px; height:320px; border:2px solid black; } circle{ stroke:none; opacity:0.25; } text{ font-size:10px; text-anchor:middle; fill:black; opacity:0; } </style> </head> <body> <h1>パックレイアウトを表示</h1> <svg id="graph"></svg> <form> <input type="button" value="2005年" data-year="year2005"> <input type="button" value="2010年" data-year="year2010"> <input type="button" value="2015年" data-year="year2015"> </form> <script src="test.js"></script> </body> </html> |
|
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 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
/* パックレイアウトを表示 */ (function(){ // HTMLファイルで設定した#graphの幅、高さを取得する var svgEle = document.getElementById("graph"); var svgWidth = getComputedStyle( svgEle, null) .getPropertyValue("width"); var svgHeight = getComputedStyle( svgEle, null) .getPropertyValue("height"); svgWidth = parseFloat( svgWidth ); // 整数に変換する svgHeight = parseFloat( svgHeight ); // 整数に変換する var pack; // 円を包むg要素の一覧 var circles; // circle要素一覧 var texts; // text要素一覧 var bubble; // パックレイアウトオブジェクト var arrData; // 円のデータを全て格納する var year ="year2005"; // 表示するデータを示す文字列 // JSONデータを読み込む d3.json("data.json",function(error,data){ arrData = data; drawPackLayout(data); }); function drawPackLayout(jsonData){ var color = d3.scale.category10(); // 10色指定 // パックレイアウトを使うための設定 bubble = d3.layout.pack().size([320,320]); // パックレイアウトで利用するグループを作成 pack = d3.select("#graph") .selectAll("g") /* valueキーが無いときは、特定のキーをパックレイアウトの valueとして使いたいとき、value()メソッドをつかいます。 このメソッドに関数を指定して、valueとして使いたいデータを 返すようにします。下記のようにかけば、任意の年の人口の数値を 返します。 yearの値は、"year2005"という文字列を設定していて、HTMLファイルの ボタンのdata-year="year2005"という文字列に対応させるようにします。 */ .data( bubble.value(function(d,i){ return d[year]; }) .nodes(jsonData)) // データセットを要素に設定 .enter() .append("g"); circles = pack.append("circle") .attr("r",0) .attr("transform",function(d,i){ return "translate(" + d.x + "," + d.y + ")"; }) .style("fill", function(d,i){ return color(i); }); circles.transition() .duration(function(d,i){ return d.depth * 800 + 800; }) .attr("r",function(d){ return d.r; }); texts = pack.append("text") .attr("transform",function(d,i){ return "translate(" + d.x + "," + d.y + ")"; }); texts.style("opacity",1) .transition() .duration(3000) .style("opacity",1) .text(function(d,i){ if( d.depth == 1 ){ return d.name; } return null; }); } // HTML上のボタンをクリックしたときに処理はここでする。 d3.selectAll("input").on("click",function(){ year = d3.select(this).attr("data-year"); pack.data( bubble.value(function(d,i){ // ここで違う年度の値を返却する return d[year]; }).nodes( arrData )); // データセットに要素を設定 circles .transition() .duration(500) .ease("bounce") .attr("r",function(d,i){ return d.r; }) .attr("transform",function(d,i){ return "translate(" + d.x + "," + d.y + ")"; }); texts .transition() .duration(500) .ease("bounce") .attr("transform",function(d,i){ return "translate(" + d.x + "," + d.y + ")"; }); }); })(); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "name" : "日本" , "year2005" : 126000000, "year2010" : 127000000, "year2015" : 128000000, "children" : [ { "name" : "東京都" , "year2005" : 12000000, "year2010" : 8500000, "year2015" : 13000000 }, { "name" : "神奈川県" , "year2005" : 8000000, "year2010" : 8200000, "year2015" : 11000000 }, { "name" : "大阪府" , "year2005" : 7500000, "year2010" : 7800000, "year2015" : 8100000 }, { "name" : "長野県" , "year2005" : 1900000, "year2010" : 1900000, "year2015" : 2050000, "children" : [ { "name": "長野市" , "year2005" : 40000, "year2010" : 330000, "year2015" : 340000 }, { "name": "松本市" , "year2005" : 330000, "year2010" : 230000, "year2015" : 110000 }, { "name": "塩尻市" , "year2005" : 60000, "year2010" : 120000, "year2015" : 240000 } ] } ] } |