クラス別の点数をデータにしたCSVファイルを読み込んで、ボタンをクリックするとほかのクラスの成績表がみれるプログラムをかきます。
サンプルコードの実行結果はこちら
|
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 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ヒストグラムを表示範囲をユーザーが指定する</title> <script src="../js/d3.js"></script> <style> svg{ width:380px; height:240px; border:2px solid black; /* 背景画像を設定する設定 background-image:url(test.png); */ } .bar{ fill:blue; stroke:white; stroke-width:2px; } .axis text{font-size:11px;} .axis path, .axis line{ fill:none; stroke:black; } </style> </head> <body> <h1>ヒストグラムを表示</h1> <svg id="graph"></svg> <form id="classSelect"> <!-- 組ごとのヒストグラムを取得するために 入力フォームに組別のボタンを用意して data-kumi属性に組に対応するヘッダー名を設定 *「data-」で始まる属性はHTML5のカスタム属性です、 カスタム属性は任意の属性を設定して利用することができます。 今回は、「kumi」です。 --> <input type="button" data-kumi="c1" value="１組"> <input type="button" data-kumi="c2" value="２組"> <input type="button" data-kumi="c3" value="３組"> <input type="button" data-kumi="c4" value="４組"> <input type="button" data-kumi="c5" value="５組"> <input type="button" data-kumi="c6" value="６組"> </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 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
/* ヒストグラムを表示する */ d3.csv("scoreData.csv",function(error,data){ // svg要素の幅、高さはここで設定 var svgEle = document.getElementById("graph"); var svgWidth = window.getComputedStyle( svgEle,null) .getPropertyValue("width"); var svgHeight = window.getComputedStyle( svgEle,null) .getPropertyValue("height"); svgWidth = parseFloat( svgWidth ); // 取得した値を整数へ変換 svgHeight = parseFloat( svgHeight ); // 取得した値を整数へ変換 var axisWidth = svgWidth - 40; // 縦軸の幅 var axisHeight = svgHeight - 30; // 横軸の幅 var offsetX = 30; // 横のずれ var offsetY = 10; // 縦のずれ var stepX = 10; // 棒グラフの数値間隔。 var xScale; // 横スケール var yScale; // 縦スケール var arrData =[ ]; data.forEach(function(d,i){ arrData.push(d.c1); // １組のデータを格納 }); // ヒストグラムを設定 var histogram = d3.layout.histogram() .range([ 0, 100]) .bins( d3.range( 0, 100.1, stepX) ); // 範囲を計算で求める /* スケール計算 */ function calcScale(){ var maxVal = d3.max( histogram(arrData), function(d,i){ return d.y; // 最大個数を返す }); // 縦スケールの設定 yScale = d3.scale.linear() .domain( [ 0,maxVal] ) .range( [ axisHeight, 0]); // 横スケールの設定 xScale = d3.scale.linear() .domain( [ 0, 100] ) .range( [ 0, axisWidth]); } /* 目盛りを表示 */ function drawScale(){ // 縦目盛りを表示 d3.select("#graph") .append("g") // g要素追加(目盛り表示要素) .attr("class","axis") // CSSクラスを指定 .attr("transform","translate(" + offsetX + ", " + offsetY +")") .call( d3.svg.axis() .scale(yScale) // スケールを摘要 .orient("left") // 目盛りの表示位置を左下 ); // 横目盛りを表示 d3.select("#graph") .append("g") // g要素追加(目盛り表示要素) .attr("class","axis") // CSSクラスを指定 .attr("transform","translate(" + offsetX + ", " + ( axisHeight + offsetY) +")") .call( d3.svg.axis() .scale(xScale) // スケールを摘要 .orient("bottom") // 目盛りの表示位置を下 ); } /* ヒストグラムの要素設定 */ function drawHistogram(){ var barElements = d3.select("#graph") .selectAll("rect") // rect要素でヒストグラム表示 .data( histogram(arrData)) // CSSクラス追加 .enter() .append("rect") // rect要素追加 .attr("class","bar") // CSSクラスを追加 .attr("x", function(d, i){ return i * xScale(d.dx) + offsetX; }) .attr("y", function(d, i){ return yScale(d.y) + offsetY; }) /* データの範囲が変更されると棒の横幅が正しく処理されないことがあります。 棒の横の間隔はヒストグラムレイアウトで自動で計算されます。 横の間隔はdxプロパティに格納されているので、下記ようにdxを 使用することで、自動的に棒の横幅を設定できます。 */ .attr("width", function(d,i){ return xScale(d.dx); }) .attr("y", axisHeight + offsetY ) .attr("height", 0 ) .transition() .duration(800) .ease("bounce") .attr("y", function(d, i){ return yScale(d.y) + offsetY; }) .attr("height", function(d,i){ return axisHeight - yScale(d.y); }); } /* 間隔変更時にヒストグラムを更新 テキストフィールドに入力された値が変化したときに下記の処理する */ d3.select("#step").on("change",function(){ stepX = this.value; histogram .bins( d3.range(0, 100.1, stepX)); d3.select("#graph").selectAll("*").remove(); calcScale(); drawHistogram(); drawScale(); }) // 初回 ヒストグラムを表示 calcScale(); drawHistogram(); drawScale(); d3.select("#classSelect") .selectAll("input[type='button']") .on("click",function(){ /* ボタンをクリックされたら、data-kimi属性の内容を読み出すには、 下記のように、attr()メソッドを使います。 d3.select(this)で「クリックされたボタン」を示している。 */ var classNum = d3.select(this).attr("data-kumi"); // 組データ // データを設定 arrData = []; data.forEach(function(d,i){ arrData.push( d[classNum] ); }) d3.select("#graph").selectAll("*").remove(); calcScale(); drawHistogram(); drawScale(); }); }) |
|
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 |
c1,c2,c3,c4,c5,c6 20,36,25,13,10,53 98,81,71,38,34,54 82,71,53,60,9,18 46,78,36,9,73,14 52,83,38,30,41,45 17,96,3,3,28,5 38,60,7,20,25,54 84,49,24,41,71,35 68,58,92,55,16,100 65,94,56,33,50,63 25,76,41,34,87,22 40,59,65,43,67,51 77,12,9,76,52,31 53,81,25,5,0,32 76,75,16,14,46,48 62,1,41,49,36,79 26,75,97,48,87,62 69,86,47,8,70,44 78,19,98,17,76,51 75,14,24,10,57,14 24,22,31,92,75,67 76,19,61,55,91,4 7,48,90,28,72,39 51,28,99,19,22,1 21,85,65,42,68,34 95,64,91,62,30,35 74,36,86,19,20,7 71,97,85,38,61,96 95,24,16,54,41,38 20,88,86,85,55,26 |