今回はパックレイアウトを使い日本の人口を表示します。
サンプルコードの実行結果はこちら
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 |
<!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> <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 |
/* パックレイアウトを表示 */ 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 ); /* 今回の人口データを利用します。 都道府県名はnameプロパティで示しています。 */ var packData = { name : "日本国", value: 128000000, children : [ { name : "東京都" , value: 13000000 }, { name : "神奈川県", value: 8800000 }, { name : "大阪府" , value: 8600000 }, { name : "愛知県" , value: 7300000 }, { name : "長野県" , value: 2100000, children : [ { name: "長野市" ,value : 380000 }, { name: "松本市" ,value : 240000 }, { name: "塩尻市" ,value : 60000 } ] } ] } var color = d3.scale.category10(); // 10色指定 var bubble = d3.layout.pack().size([320,320]); /* 都道府県名・市名を円の中央に表示します。円と文字をまとめて 処理するためにg要素を使ってグループを作成します。データセットには、 このg要素に対して割り当てます。円と文字の表示位置はg要素の 表示位置を変更します。 */ var pack =d3.select("#graph") .selectAll("g") .data( bubble.nodes(packData)) .enter() .append("g") .attr("transform",function(d,i){ return "translate(" + d.x + "," + d.y + ")"; }); pack.append("circle") .attr("r",0) .transition() .duration(function(d,i){ return d.depth * 800 + 500; }) .attr("r",function(d){ return d.r; }) .style("fill",function(d,i){ return color(i); }); pack.append("text") .style("opacity",0) .transition() .duration(2000) .style("opacity",1) .text(function(d,i){ /* 文字はtext要素を生成しtext()メソッドを使い表示します。 そのとき、全ての文字を表示すると文字が重なって 読みにくくなります。そこで都道府県の階層のみ表示するようにし、 全国や市の階層では、文字を表示しないようにします。 パックレイアウトでは階層の深さをdepthプロパティで 保持しています。階層の深さが都道府県レベルのときのみ 文字を表示するように条件を書いています。 ルート(全国レベル)では、depthは0、都道府県はdepthは1、 市は2といった感じで階層が深くなると1ずつ加算されていきます。 下記のdepthが1のときは都道府県のみを返すようにしてます。 */ if( d.depth == 1 ){ return d.name; } return null; }); |