D3.jsでは円グラフに一工夫を加えることで鶏頭図を表示できます。鶏頭図は円グラフと似ていますが。それぞれの扇形の中心角は一定で、量は中心からの半径で表示されます。
サンプルコードの実行結果はこちら
|
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:480px; height:480px; border:2px solid black; background-color:#ffffff; } .pie{ stroke:white; stroke-width:4px; opacity:0.4;} .label{ fill:black; 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 |
/* 鶏頭図を表示する */ // 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 = [ { location : "東京" , value : 10 }, { location : "横浜" , value : 40 }, { location : "大阪" , value : 60 }, { location : "京都" , value : 20 }, { location : "千葉" , value :100 } ]; var inRadius = 64; // 内円の半径 var ouRadius = inRadius + 16; // 内円＋ずれの半径 var color = d3.scale.category10(); // 鶏頭図の１つの扇形に割り当てる角度を計算 for( var i = 0 ; i < arrData.length ; i++){ /* startAngleプロパティが扇形の開始角度 endAngleプロパティが扇形の終了角度 */ arrData[i].startAngle = ( 360 / arrData.length ) * i * Math.PI /180; arrData[i].endAngle = ( 360 / arrData.length ) * ( i + 1 )* Math.PI /180; } // 鶏頭図のサイズを指定 var arc = d3.svg.arc() .innerRadius(inRadius) /* データの値により扇形の大きさをかえます。 関数はデータセットのデータを１つずつ処理できるので データ値を外半径として返す。 */ .outerRadius(function(d){ return ouRadius + d.value; }) // 鶏頭図を描画 d3.select("#graph") .selectAll("path") .data(arrData) .enter() .append("path") .attr("class","pie") .attr("d",arc) .attr("fill",function(d,i){ return color(i); }) .attr("transform", "translate(" + svgWidth / 2 + ", " + svgHeight / 2 + ")"); // 文字を描画 d3.select("#graph") .selectAll("text") .data(arrData) .enter() .append("text") .attr("class","label") .attr("transform",function(d,i){ /* 扇形の部分に文字やデータを表示するには、 centroid()メソッドを使い、扇形の重心を 計算します。centroid()メソッドは得られた 重心の座標値を配列で返します。 */ var c = arc.centroid(d); // 扇形の重心を計算 var x = c[0] + svgWidth / 2; // Ｘ座標を読み出す var y = c[1] + svgHeight / 2; // Ｙ座標を読み出す return "translate(" + x + ", " + y + ")"; }) .text(function(d,i){ return d.location + "(" + d.value + ")"; }); |