目盛りの表示は何度もしました。散布図でも縦軸、横軸を表示しました。
今回は、グリッド(マス目)を表示します。
D3.jsでは、rangeメソッドを使うと範囲の値を自動的に生成します。
1 |
配列 = d3.range(開始値,終了値,間隔) |
横方向のグリッドを20間隔で生成する場合は、下記のようにします。
1 |
var rangeX = d3.range(0, 200, 50); |
縦も同様の方法で指定します。
1 |
var rangeY = d3.range(0, 200, 40); |
サンプルコードの実行結果はこちら
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 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>散布図にグリッドを表示する</title> <script src="../js/d3.js"></script> <style> svg{ width:340px; height:340px; border:2px solid red;} .mark{ fill:red; stroke:none;} .axis text{font-size:12px;} .axis path, .axis line{ fill:none; stroke:black; } .grid{ stroke: gray; stroke-dashaaray: 5,2; shape-rendering: crispEdges; } </style> </head> <body> <h2>散布図を表示する</h2> <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 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 |
/* 散布図を表示する */ var svgWidth = 300; // SVG要素の幅 var svgHeight = 300; // SVG要素の高さ var offsetX = 30; // X座標のずれ var offsetY = -20; // Y座標のずれ var svg = d3.select("#graph"); var arrData = [ [16,32],[64,48],[128,92],[70,150],[120,300], [45,90],[110,160],[300,20],[180,180],[15,145] ]; var circleElements = svg .selectAll("circle") // circle要素を追加 .data(arrData); circleElements .enter() .append("circle") // CSSクラスを指定 .attr("class","mark") .attr("cx",function(d,i){ return d[0] + offsetX; // 1番目の要素をX表に指定 }) .attr("cy",function(d,i){ return svgHeight - d[1] - offsetY; // 2番目の要素をY座標に指定 }) .attr("r",4); // 点の半径 // アニメーション後の散布図に使用するデータを再設定 function generateData(data){ var result = data .map(function(d,i){ // 配列の要素数だけ繰り返す var x = Math.random() * svgWidth; // X座標を設定 var y = Math.random() * svgHeight; // Y座標を設定 return [x, y]; }); return result; } // 散布図を更新する関数 function generateGraph(){ circleElements .data(arrData) .transition() .attr("cx",function(d,i){ return d[0] + offsetX; }) .attr("cy",function(d,i){ return svgHeight - d[1] - offsetY; }); } function drawScale(){ var maxX = d3.max(arrData,function(d,i){ /* 以下のようにd[ ]の添字を0を指定すると X座標の最大値を求めることができます。 */ return d[0]; // X座標 }); var maxY = d3.max(arrData,function(d,i){ /* 以下のようにd[ ]の添字を1を指定すると Y座標の最大値を求めることができます。 */ return d[1]; // Y座標 }); // 縦の目盛りを表示するために縮尺設定 var yScale = /* 上記で求めた最大値maxYをここで使用する。 */ d3.scale.linear() // 縮尺設定 .domain([0, maxY]) // 元データの範囲 .range([maxY, 0]); // 実際の出力サイズ // 目盛りを表示 svg.append("g") .attr("class","axis") .attr("transform","translate(" + offsetX + ", " + ( svgHeight - maxY - offsetY ) + ")" ) .call( d3.svg.axis() .scale(yScale) .orient("left") .ticks(20) ); // 横の目盛りを表示するために縮尺設定 var xScale = /* 上記で求めた最大値maxXをここで使用する。 */ d3.scale.linear() // 縮尺設定 .domain([0, maxX]) // 元データの範囲 .range([0, maxX]); // 実際の出力サイズ // 目盛りを表示 svg.append("g") .attr("class","axis") .attr("transform","translate(" + offsetX + ", " + ( svgHeight - offsetY ) + ")" ) .call( d3.svg.axis() .scale(xScale) .orient("bottom") ); // グリッドを表示 var grid = svg.append("g"); // 横方向と縦方向のグリッド間隔を自動生成 var rangeX = d3.range(50, maxX, 50); var rangeY = d3.range(20, maxY, 20); // 縦方向のグリッドを作成 grid.selectAll("line.y") .data(rangeY) .enter() .append("line") .attr("class","grid") .attr("x1", offsetX) .attr("y1", function(d,i){ return svgHeight - d - offsetY; }) .attr("x2", maxX + offsetX) .attr("y2", function(d,i){ return svgHeight - d - offsetY; }); // 横方向のグリッドを作成 grid.selectAll("line.x") .data(rangeX) .enter() .append("line") .attr("class","grid") .attr("x1", function(d,i){ return d + offsetX; }) .attr("y1", svgHeight - offsetY) .attr("x2", function(d,i){ return d + offsetX; }) .attr("y2", svgHeight - offsetY - maxY); } drawScale(); // 一定時間後に行う処理 setInterval(function(){ arrData = generateData( arrData ); // データを更新 generateGraph(); // グラフの更新(アニメーション) },2000); |