2次元配列のデータを用意して、少し複雑なデータを読み込んで折れ線グラフを表示してみます。
サンプルコードの実行結果はこちら
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 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>折れ線グラフの線を色々な形にする</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:11px;} .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> <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 |
/* 折れ線グラフを表示するサンプルコード */ var svgWidth = 400; // SVG要素の幅 var svgHeight = 240; // SVG要素の高さ var offsetX = 32; // 横方向のオフセット var offsetY = 20; // 縦方向のオフセット var scale = 2.00; // 2倍のサイズ // 今回は3つのデータセットを用意 var arrData = [ [ { year : 2006, value : 12 }, { year : 2007, value : 42 }, { year : 2008, value : 70 }, { year : 2009, value : 55 }, { year : 2010, value : 66 }, { year : 2011, value : 32 }, { year : 2012, value : 8 }, { year : 2013, value : 20 }, { year : 2014, value : 29 }, { year : 2015, value : 60 }, ], [ { year : 2006, value : 92 }, { year : 2007, value : 67 }, { year : 2008, value : 55 }, { year : 2009, value : 45 }, { year : 2010, value : 36 }, { year : 2011, value : 51 }, { year : 2012, value : 23 }, { year : 2013, value : 59 }, { year : 2014, value : 80 }, { year : 2015, value : 47 }, ], [ { year : 2006, value : 47 }, { year : 2007, value : 73 }, { year : 2008, value : 79 }, { year : 2009, value : 51 }, { year : 2010, value : 34 }, { year : 2011, value : 89 }, { year : 2012, value : 9 }, { year : 2013, value : 26 }, { year : 2014, value : 37 }, { year : 2015, value : 54 }, ] ]; var margin = svgWidth / (arrData[0].length - 1 );// 折れ線グラフの間隔 /* データセットして、要素番号を指定して配列データを渡す */ drawGraph( arrData[0], "red" ,"linear"); // 折れ線グラフを表示 drawGraph( arrData[1], "blue" ,"step" ); // 折れ線グラフを表示 drawGraph( arrData[2], "green","basis" ); // 折れ線グラフを表示 drawScale(); //目盛りを表示する function drawGraph( arrData,cssClassName,type){ var line = d3.svg.line() // svgのライン .x(function(d,i){ return offsetX + i * margin; // X座標は出現順番*間隔 }) .y(function(d,i){ return svgHeight - ( d.value * scale ) - offsetY; //データからY座標の分を引く }) .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 + ", " + offsetY + ")") /* scale = 2.00 の値を変えると表示倍率が変わりますが、 縦の目盛り位置がずれてしまいます。今回は100を基準にしているため、 倍率を変化させても目盛りが正しく表示させるには、 下記のコメントアウトの箇所のように書きます。 */ /* .attr("transform","translate(" + offsetX + ", " + ((100-(scale-1)*100) + offsetY ) + ")") */ .call( d3.svg.axis() .scale(yScale) // スケールを摘要 .orient("left") // 目盛りの表示位置を左側 ); d3.select("#graph") .append("rect") .attr("class","axisX") .attr("width", svgWidth) .attr("height",1) .attr("transform","translate(" + offsetX + ", " + (svgHeight - offsetY - 0.5) + ")"); } |
折れ線グラフを描画する時に、データセットして、要素番号を指定して配列データを渡す
drawGraph( arrData[0], "red" ,"linear"); // 折れ線グラフを表示
drawGraph( arrData[1], "blue" ,"step" ); // 折れ線グラフを表示
drawGraph( arrData[2], "green","basis" ); // 折れ線グラフを表示
上記のように書くと、x()メソッド,y()メソッドに指定した関数には、以下のデータ(オブジェクト)が渡されます。
{ year : 2006, value : 12 },
前回までの記事にしたグラフだと数値だけだったので、そのままY座標の値を計算することができましたが、上記のようなデータが関数に渡されたときは、D3.jsでは「year」、「value」はオブジェクトのプロパティ名として参照できるようになります。
下記のように、d.valueとするとグラフの表示に必要なY座標の値を読み出すことができます。
return svgHeight - ( d.value * scale ) - offsetY;