散布図に目盛りを表示してみます。
サンプルコードの実行結果はこちら
|
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: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; } </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 |
/* 散布図を表示する */ var svgWidth = 300; // SVG要素の幅 var svgHeight = 300; // SVG要素の高さ var offsetX = 30; // Ｘ座標のずれ var offsetY = -20; // Ｙ座標のずれ var arrData = [ [16,32],[64,48],[128,92],[70,150],[120,300], [45,90],[110,160],[300,20],[180,180],[15,145] ]; var circleElements = d3.select("#graph") .selectAll("circle") // circle要素を追加 .data(arrData); circleElements .enter() .append("circle") // CSSクラスを指定 .attr("class","mark") .attr("cx",function(d,i){ return d[0] + offsetX; // １番目の要素をＸ表に指定 }) .attr("cy",function(d,i){ return svgHeight - d[1] - offsetY; // ２番目の要素をＹ座標に指定 }) .attr("r",4); // 点の半径 // アニメーション後の散布図に使用するデータを再設定 function generateData(data){ var result = data .map(function(d,i){ // 配列の要素数だけ繰り返す var x = Math.random() * svgWidth; // Ｘ座標を設定 var y = Math.random() * svgHeight; // Ｙ座標を設定 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[ ]の添字を０を指定すると Ｘ座標の最大値を求めることができます。 */ return d[0]; // Ｘ座標 }); var maxY = d3.max(arrData,function(d,i){ /* 以下のようにd[ ]の添字を１を指定すると Ｙ座標の最大値を求めることができます。 */ return d[1]; // Ｙ座標 }); // 縦の目盛りを表示するために縮尺設定 var yScale = /* 上記で求めた最大値maxYをここで使用する。 */ d3.scale.linear() // 縮尺設定 .domain([0, maxY]) // 元データの範囲 .range([maxY, 0]); // 実際の出力サイズ // 目盛りを表示 d3.select("#graph") .append("g") .attr("class","axis") .attr("transform","translate(" + offsetX + ", " + ( svgHeight - maxY - offsetY ) + ")" ) .call( d3.svg.axis() .scale(yScale) .orient("left") ); // 横の目盛りを表示するために縮尺設定 var xScale = /* 上記で求めた最大値maxXをここで使用する。 */ d3.scale.linear() // 縮尺設定 .domain([0, maxX]) // 元データの範囲 .range([0, maxX]); // 実際の出力サイズ // 目盛りを表示 d3.select("#graph") .append("g") .attr("class","axis") .attr("transform","translate(" + offsetX + ", " + ( svgHeight - offsetY ) + ")" ) .call( d3.svg.axis() .scale(xScale) .orient("bottom") ); } drawScale(); // 一定時間後に行う処理 setInterval(function(){ arrData = generateData( arrData ); // データを更新 generateGraph(); // グラフの更新(アニメーション) },2000); |
サンプルコードについて・・・
今回は今までのサンプルコードとは、違う点があります。それはデータセットから最大値を求めて、その値を目盛りの最大値にしている点です。
D3.jsでは、最大値を求めるメソッドで、d3.max()があります。d3.max()メソッドは１番目のパラメーターに配列を指定した場合、その配列に含まれるデータの最大値を返却します。ただそれは、単純な配列の場合で、今回の散布図のような配列要素内に配列がある二次元配列の場合は、そのままではできないので、d3.max()メソッドの２番目のパラメーターに関数を指定すると、配列要素内の特定の値のみを見ることができます。