テキストファイルを読み込んで、ファイル内で使われている文字数を数えてツリーマップに表示します。 入れ子にはならないですが、使用頻度が高い文字が分かります。
サンプルコードの実行結果はこちら
|
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 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>使われている文字数を数えて表示する</title> <script src="../js/d3.js"></script> <style> svg{ width:960px; height:640px; 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> <p>＊タブ、スペース、特殊文字は空欄になります。</p> <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 |
/* パックレイアウトを表示 */ // 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 ); // 整数に変換する /* データがテキストなら、.txtファイルでなくても 読み込むことができます。 */ d3.text("test.js",function(error,plainText){ var arrStrData = []; for( var i = 0; i < plainText.length ; i++){ /* 読み込んだ文字を数えるにはHavaScriptの連想配列／ハッシュを 利用すると便利です。文字を数える配列を用意。 */ // 読み込んだファイルの文字を１文字ずつ読み取る var c = plainText.charAt(i); /* 上記で読み込んだ文字列を配列のキーとして扱い 既に使われているかを判定 */ if( !arrStrData[c] ){ /* 使われていない場合は arrStrData[キー]の数値に １を格納する。（＝使用されている文字数を１にする） */ arrStrData[c] = 1; }else{ /* 使われている場合は、配列[存在するキー]の値に１加算 */ arrStrData[c]++; } } var temp = []; for( i in arrStrData ){ // 連想配列のキー名(i)とそれの値(arrStrData[i])を格納 temp.push( { name : i , value : arrStrData[i] }); } // データセットのchildrenに生成した配列を指定 var arrData ={ children : temp }; drawTreeMap(arrData); }) function drawTreeMap(arrData){ // ツリーマップレイアウト var treemap = d3.layout.treemap() .size([ svgWidth, svgHeight]) /* ツリーマップレイアウトには、以下の表示方法が設定できます。 .mode()の設定値 squarify ：四角形(初期値) slice ：水平分割 dice ：垂直分割 slice-dice：分割 */ .mode("squarify"); // ツリーマップを描画する 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; }); // マップ内に文字追加 tmap.enter() .append("text") // text要素追加 .attr("class","name") // CSSクラス追加 .attr("transform",function(d,i){ return "translate(" + (d.x + d.dx/2 ) + "," + (d.y + d.dy/2 ) + ")"; }) .attr("dy","0.2em") // 表示位置調整 .text(function(d,i){ // 文字表示 return d.name; // 領域内に表示する文字を返す }) .style("font-size", function(d,i){ // 空間サイズに応じて文字サイズ変更 return ( d.dx * d.dy ) / 200; }); } |