JSONファイルからデータを読み込んで折れ線グラフを表示します。グラフのデータの読み込みは10年分のみにします。
サンプルコードの実行結果はこちら
|
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>JSONデータを読み込んでボタンを押して折れグラフを切り替える。</title> <script src="../js/d3.js"></script> <style> svg{ width:400px; height:300px; border:2px solid red;} .line{fill:none; stroke:black;} .axis text{font-size:12px;} .axis path, .axis line{ fill:none; stroke:black;} .axisX line{fill:none; stroke:black;} .red { stroke: red;} .blue { stroke: blue;} .green{ stroke: green;} </style> </head> <body> <h2>ボタンをクリックして折れ線グラフの表示範囲を変更する</h2> <svg id="graph"></svg> <div> <button id="prev">前へ</button> <button id="next">次へ</button> </div> <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 |
/* 折れ線グラフを表示するサンプルコード */ d3.json("graphData.json",function(error,data){ var arrData = [ ]; var svgEle = document.getElementById("graph"); var svgWidth = window.getComputedStyle(svgEle, null) .getPropertyValue("width"); // SVG要素の幅 var svgHeight = window.getComputedStyle(svgEle, null) .getPropertyValue("height"); // SVG要素の高さ svgWidth = parseFloat( svgWidth ) - 60; svgHeight = parseFloat( svgHeight) - 60; var offsetX = 30; // 横方向のオフセット var offsetY = 20; // 縦方向のオフセット var scale = 2.00; // ２倍のサイズ var durationYear = 10; //１０年分表示 var year = d3.extent( data,function(d){ return d.year; }); var startYear = year[0]; // 最初の年 var currentYear = 2000; // 最に表示する基準年 var margin = svgWidth / (durationYear - 1); // 折れ線グラフの間隔 chooseGraphData( data,currentYear - startYear ); drawGraph( arrData,"value1", "red" ,"linear"); // 折れ線グラフを表示 drawGraph( arrData,"value2", "blue" ,"step" ); // 折れ線グラフを表示 drawGraph( arrData,"value3", "green","basis" ); // 折れ線グラフを表示 drawScale(); // 目盛りを表示する function drawGraph( arrData,itemName,cssClassName,type){ var line = d3.svg.line() // svgのライン .x(function(d,i){ return offsetX + i * margin; // Ｘ座標は出現順番＊間隔 }) .y(function(d,i){ //データからＹ座標の分を引く return svgHeight - ( d[ itemName ] * scale ) - offsetY; }) .interpolate(type); // 折れ線グラフの形状を設定 var lineElements = d3.select("#graph") .append("path") // データの数だけpath要素が追加される .attr("class","line " + cssClassName ) // CSSクラスを指定 .attr("d",line( arrData ) ); // 連続線を指定 } function drawScale(){ // 目盛りを表示するためのスケールを設定 var yScale = d3.scale.linear() // スケールの設定 .domain([0,100]) // 元のサイズ .range([scale*100,0]); // 実際の出力サイズ // 目盛りを表示する d3.select("#graph") .append("g") // g要素の追加。目盛りを表示する要素 .attr("class","axis") // CSSクラスを指定 .attr("transform","translate(" + offsetX + ", " + ( ( 100 - ( scale - 1 ) * 100 ) + offsetY ) + ")") .call( d3.svg.axis() .scale(yScale) // スケールを摘要 .orient("left") // 目盛りの表示位置を左側 ); // 横の目盛りを表示する為の設定 var xScale = d3.time.scale() .domain([ new Date( currentYear + "/1/1"), new Date(( currentYear + durationYear - 1 ) + "/1/1") ]) // 表示範囲の年数 .range([0, svgWidth]); // 出力サイズ // 横の目盛りを表示 d3.select("#graph") .append("g") .attr("class","axis") .attr("transform","translate(" + offsetX + ", " + ( svgHeight - offsetY ) + ")") .call( d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(10) //1年に1度の表示をする .tickFormat(function(d,i){ var yearNum = d3.time.format("%Y年%m月"); return yearNum(d); }) ) .selectAll("text") // 目盛りの文字を対象にする .attr("transform", "rotate(90)" ) // ９０度回転 .attr("dx"," 0.7em") // 位置調整 .attr("dy"," 0.2em") // 位置調整 .style("text-anchor","start") // 表示位置指定 } function chooseGraphData(data,start){ arrData = []; // JSONデータを消去 for(var i = 0 ; i < durationYear; i++){ arrData[i] = data[ start + i ]; } d3.select("#graph").selectAll("*").remove(); } // 「前へ」ボタンクリック時の処理 d3.select("#prev").on("click",function(){ if( currentYear > year[0] ) currentYear--; chooseGraphData( data,currentYear - startYear ); drawGraph( arrData,"value1", "red" ,"linear"); // 折れ線グラフを表示 drawGraph( arrData,"value2", "blue" ,"step" ); // 折れ線グラフを表示 drawGraph( arrData,"value3", "green","basis" ); // 折れ線グラフを表示 drawScale(); // 目盛りを表示する }); // 「次へ」ボタンクリック時の処理 d3.select("#next").on("click",function(){ if( currentYear <= year[1] - durationYear ) currentYear++; chooseGraphData( data,currentYear - startYear ); drawGraph( arrData,"value1", "red" ,"linear"); // 折れ線グラフを表示 drawGraph( arrData,"value2", "blue" ,"step" ); // 折れ線グラフを表示 drawGraph( arrData,"value3", "green","basis" ); // 折れ線グラフを表示 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 32 33 34 35 36 37 38 39 40 41 |
[ { "year" : 1980, "value1" : 10, "value2" : 26, "value3" : 42 }, { "year" : 1981, "value1" : 19, "value2" : 24, "value3" : 76 }, { "year" : 1982, "value1" : 25, "value2" : 22, "value3" : 55 }, { "year" : 1983, "value1" : 36, "value2" : 20, "value3" : 32 }, { "year" : 1984, "value1" : 44, "value2" : 18, "value3" : 19 }, { "year" : 1985, "value1" : 32, "value2" : 16, "value3" : 89 }, { "year" : 1986, "value1" : 20, "value2" : 14, "value3" : 96 }, { "year" : 1987, "value1" : 47, "value2" : 12, "value3" : 90 }, { "year" : 1988, "value1" : 61, "value2" : 10, "value3" : 77 }, { "year" : 1989, "value1" : 69, "value2" : 8, "value3" : 60 }, { "year" : 1990, "value1" : 77, "value2" : 46, "value3" : 52 }, { "year" : 1991, "value1" : 60, "value2" : 44, "value3" : 78 }, { "year" : 1992, "value1" : 90, "value2" : 42, "value3" : 43 }, { "year" : 1993, "value1" : 92, "value2" : 40, "value3" : 20 }, { "year" : 1994, "value1" : 99, "value2" : 38, "value3" : 9 }, { "year" : 1995, "value1" : 91, "value2" : 36, "value3" : 4 }, { "year" : 1996, "value1" : 70, "value2" : 34, "value3" : 2 }, { "year" : 1997, "value1" : 51, "value2" : 32, "value3" : 26 }, { "year" : 1998, "value1" : 37, "value2" : 30, "value3" : 40 }, { "year" : 1999, "value1" : 21, "value2" : 28, "value3" : 48 }, { "year" : 2000, "value1" : 19, "value2" : 26, "value3" : 47 }, { "year" : 2001, "value1" : 11, "value2" : 24, "value3" : 44 }, { "year" : 2002, "value1" : 5, "value2" : 22, "value3" : 69 }, { "year" : 2003, "value1" : 6, "value2" : 20, "value3" : 79 }, { "year" : 2004, "value1" : 10, "value2" : 18, "value3" : 76 }, { "year" : 2005, "value1" : 21, "value2" : 16, "value3" : 82 }, { "year" : 2006, "value1" : 35, "value2" : 14, "value3" : 88 }, { "year" : 2007, "value1" : 51, "value2" : 12, "value3" : 85 }, { "year" : 2008, "value1" : 55, "value2" : 10, "value3" : 62 }, { "year" : 2009, "value1" : 65, "value2" : 8, "value3" : 69 }, { "year" : 2010, "value1" : 81, "value2" : 26, "value3" : 42 }, { "year" : 2011, "value1" : 63, "value2" : 24, "value3" : 48 }, { "year" : 2012, "value1" : 67, "value2" : 22, "value3" : 55 }, { "year" : 2013, "value1" : 80, "value2" : 20, "value3" : 59 }, { "year" : 2014, "value1" : 93, "value2" : 18, "value3" : 40 } ] |
サンプルコードについて・・・
指定された範囲のデータをピックアップしてみる
今回用意して利用するデータは、表示する範囲より多いデータです。10年分だけを選択すchooseGraphData関数を作成します。chooseGraphData関数で選択した範囲のデータを抜き出して、それをデータセットとします。
|
1 2 3 4 5 6 7 8 |
function chooseGraphData(data,start){ arrData = []; for(var i = 0 ; i < durationYear; i++){ arrData[i] = data[ start + i ]; } d3.select("#graph").selectAll("*").remove(); } |
ボタンがクリックされた時の処理
ボタンをクリックされたら表示開始年数を変更して、新たな折れ線グラフを表示する処理をするようにします、ボタンクリック時の処理はd3.select()メソッドでイベントを起こす要素を選択し、on()メソッドでイベントを設定します。「前へ」ボタンをクリックされた時、前のデータを表示できるなら現在表示中の年数を１減算します。反対に、「次へ」ボタンがクリックされたなら、現在表示中の年数を１加算します。
|
1 2 3 4 5 6 7 8 |
d3.select("#prev").on("click",function(){ if( currentYear > year[0] )currentYear--; chooseGraphData( data, currentYear - startYear ); drawGraph( arrData,"value1", "red" ,"linear"); drawGraph( arrData,"value2", "blue" ,"step" ); drawGraph( arrData,"value3", "green","basis" ); }) |
年数を調べる時にyear[0]はJSON形式のデータから最大値・最小値を求めた結果が格納されている変数です。配列から最大値・最小値を求めたいときは、d3.extent()メソッドを使います。データが配列ではない場合は、d3.extent()メソッドの２番目のパラメーターに関数を指定することで、色々なデータに対応できます。関数には配列のデータが渡されるので、今回のデータ形式では下記のようにオブジェクトのプロパテイ名を参照できます。
|
1 2 3 |
var year = d3.extent( data,function(d){ return d.year; }); |