/*
折れ線グラフを表示するサンプルコード
*/
var svgWidth = 400; // SVG要素の幅
var svgHeight = 240; // SVG要素の高さ
var offsetX = 32; // 横方向のオフセット
var offsetY = 20; // 縦方向のオフセット
var scale = 2.00; // ２倍のサイズ
// 今回は３つのデータセットを用意
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; // Ｘ座標は出現順番＊間隔
})
.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 + ", " + offsetY + ")")
/*
scale = 2.00 の値を変えると表示倍率が変わりますが、
縦の目盛り位置がずれてしまいます。今回は１００を基準にしているため、 倍率を変化させても目盛りが正しく表示させるには、
下記のコメントアウトの箇所のように書きます。
*/
/*
.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) + ")");
}