前回のヒストグラムの記事で点数の範囲を10点刻みではなく5点、20点など任意の範囲で表示できるようにしてみます。下記のように入力フォームを使ってみます。
サンプルコードの実行結果はこちら
|
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 |
<!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; } .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> <p>間隔：<input type="text" value="10" id="step"></p> </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 |
/* ヒストグラムを表示する */ // 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 =[ ]; for( var i = 0 ; i < 30 ; i++){ // 0～100までの数値をランダムで設定 arrData[i] = Math.floor( Math.random() * 101 ); } // ヒストグラムを設定 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(); |
サンプルコードについて・・・
|
1 |
<p>間隔：<input type="text" value="10" id="step"></p> |
上記のようにフォーム設けて範囲をユーザーが選択できるようにすると、前回の記事のようにbins()メソッドをにプログラム上で範囲を指定することができません。なぜならユーザーが入力した値によって範囲が変わってしまうからです。そこで範囲を表す変数stepXを設けてデータ区切りは以下のように、d3.range()メソッドを使います。
|
1 2 3 |
var histogram = d3.layout.histogram() .range([ 0, 100]) .bins( d3.range( 0,100.1, stepX) |