まずは、サンプルコードの実行結果はこちら
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 |
/* 折れ線グラフを表示するサンプルコード */ var svgWidth = 400; // SVG要素の幅 var svgHeight = 240; // SVG要素の高さ var offsetX = 32; // 横方向のオフセット var offsetY = 20; // 縦方向のオフセット var scale = 2.00; // 2倍のサイズ // 今回は3つのデータセットを用意 var arrData = [ { year : 2006, value1 : 12, value2 : 92, value3 : 47 }, { year : 2007, value1 : 42, value2 : 67, value3 : 73 }, { year : 2008, value1 : 70, value2 : 55, value3 : 79 }, { year : 2009, value1 : 55, value2 : 45, value3 : 51 }, { year : 2010, value1 : 66, value2 : 36, value3 : 34 }, { year : 2011, value1 : 32, value2 : 51, value3 : 89 }, { year : 2012, value1 : 8 , value2 : 23, value3 : 9 }, { year : 2013, value1 : 20, value2 : 59, value3 : 26 }, { year : 2014, value1 : 29, value2 : 80, value3 : 37 }, { year : 2015, value1 : 60, value2 : 47, value3 : 54 } ]; var margin = svgWidth / (arrData.length - 1 );// 折れ線グラフの間隔 /* データセットして、要素番号を指定して配列データを渡す */ 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; // X座標は出現順番*間隔 }) .y(function(d,i){ //データからY座標の分を引く 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 + ", " + 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) + ")"); } |
今回紹介するのも複数の線グラフを表示するものですが、データセットの書き方が違います。今回はJSON形式のデータで線グラフを表示します。
下記は、前回の記事の配列データを、JSON形式にしたデータです。
var arrData = [
{ year : 2006, value1 : 12, value2 : 92, value3 : 47 },
{ year : 2007, value1 : 42, value2 : 67, value3 : 73 },
{ year : 2008, value1 : 70, value2 : 55, value3 : 79 },
{ year : 2009, value1 : 55, value2 : 45, value3 : 51 },
{ year : 2010, value1 : 66, value2 : 36, value3 : 34 },
{ year : 2011, value1 : 32, value2 : 51, value3 : 89 },
{ year : 2012, value1 : 8 , value2 : 23, value3 : 9 },
{ year : 2013, value1 : 20, value2 : 59, value3 : 26 },
{ year : 2014, value1 : 29, value2 : 80, value3 : 37 },
{ year : 2015, value1 : 60, value2 : 47, value3 : 54 }
];
上記の場合は、arrData配列の要素番号を指定することができません。
サンプルコードのdrawGraph関数を修正します。
下記は、value1という名前の項目をグラフデータを表示します。
drawGraph( arrData,"value1", "red" ,"linear");
その場合、x()メソッド、y()メソッドに指定した関数に渡されるデータは下記の通りです。
{ year : 2006, value1 : 12, value2 : 92, value3 : 47 },
オブジェクトとして渡されるので、d.value1と書いて、参照することができます。
drawGraph関数にはオブジェクトに加えて文字列もパラメーターとして渡されています。このときは、d["value1"]のようにして、連動配列形式で指定しなければなりません。
ということは、d[ ]添字にdrawGraph関数にワタアされたパラメーターを指定すればデータの値を読み出せます。
return svgHeight - ( d[ itemName ] * scale ) - offsetY;