ツリーマップレイアウトは、それぞれのノード全体に占める割合を把握することに向いています。たとえば、日本という国の、各エリアの人口を知りたいとき、どのエリアに人がたくさん住んでいるかを視覚的に把握することができます。
サンプルコードの実行結果はこちら
|
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 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ツリーマップにアニメーションをつけて表示する</title> <script src="../js/d3.js"></script> <style> svg{ width:320px; height:240px; border:1px solid black; } .block{ stroke:black; fill:#c0c0c0; } .name{ font-size:10px; text-anchor:middle; } </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 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
/* ツリーマップレイアウトを表示 */ (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 arrData = { name : "日本の人口", children : [ { nane : "関東", children : [ { nane : "東京都" , value : 240 }, { nane : "神奈川県", value : 105 }, { children : [ { nane : "川崎市", value : 60 }, { nane : "横浜市", value : 45 }, { children : [ { nane : "北部", value : 30 }, { nane : "南部", value : 15 }, { children : [ { nane : "＊＊＊駅周辺", value :10 }, { nane : "●●●駅周辺", value : 5 } ]} ]} ]} ]} ]}; // ツリーマップレイアウト var treemap = d3.layout.treemap() .size([ svgWidth, svgHeight]); // ツリーマップを描画する var tmap = d3.select("#graph") .selectAll("rect") .data( treemap.nodes(arrData) ); tmap.enter() .append("rect") .attr("class","block") // CSSクラスを追加 .attr("x", function(d,i){ // Ｘ座標を設定 return d.x; }) .attr("y", function(d,i){ // Ｙ座標を設定 return d.y; }) .attr("width", function(d,i){ // 幅を設定 return d.dx; }) .attr("height", function(d,i){ // 高さを設定 return d.dy; }) .style("opacity",0) .transition() .delay(function(d,i){ return d.depth * 600; }) .style("opacity",function(d,i){ // 深さに応じて不透明度設定 return d.depth / 4; // 入れ子が深くなるほど濃くする }); // マップ内に文字追加 tmap.enter() .append("text") // text要素追加 .attr("class","name") // CSSクラス追加 .attr("transform",function(d,i){ var deg = 0; /* 人口の数値の桁数が多い場合、領域から数値がはみ出ることがあるので 領域サイズに応じて文字サイズを変化させることもできますが、 今回は文字を回転させることで領域内に表示されるようにしてます。 */ if( d.dx < d.dy ){ // 幅＜高さなら文字を90度回転 deg = -90; } return "translate(" + (d.x + d.dx/2 ) + "," + (d.y + d.dy/2 ) + ") rotate(" + deg + ")"; }) .attr("dy","0.35em") // 表示位置調整 .text(function(d,i){ // 文字表示 if( d.depth == 0 || d.children){ // ルートか子ノードがある場合 return null; } return d.value; // 領域内に表示する文字を返す }) .style("opactiy",0) .transition() .delay(function(d,i){ return d.depth * 600; }) .style("opacity",1); })(); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var arrData = { name : "日本の人口", children : [ { nane : "関東", children : [ { nane : "東京都" , value : 240 }, { nane : "神奈川県", value : 105 }, { children : [ { nane : "川崎市", value : 60 }, { nane : "横浜市", value : 45 }, { children : [ { nane : "北部", value : 30 }, { nane : "南部", value : 15 }, { children : [ { nane : "＊＊＊駅周辺", value :10 }, { nane : "●●●駅周辺", value : 5 } ]} ]} ]} ]} ]}; |
nameが都道府県名、町の名前を示し、valueが人口を表しています。場所の名前の下に人口が含まれている階層構造にしています。
アニメーションをつけて階層構造を表示する
以前の記事で色の濃さで階層を把握しましたが、D3.jsを利用しているので、アニメーションを使って階層構造を表しています。