縦棒グラフにグラフの目盛りを表示します。まずは目盛りのスタイルを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 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>D3.js 縦棒グラフに目盛りを表示する</title> <style> svg{ width:240px; height:340px; border:2px solid black; } rect{fill:green;} .fillPink{fill:pink;} /* 縦棒グラフにラベルを表示する設定 */ .barNum{ font-size:10px; text-anchor:middle; } .axis text{ font-family:sans-serif; font-size:11px; } .axis path, .axis line{ fill:none; stroke:green; } .axisX line{ fill:none; stroke:black; } .barName{ font-size:9px; text-anchor:middle; } </style> <script src="../js/d3.js"></script> </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 |
var svgHeight = 320; //svg要素の高さ var bar; //棒グラフの棒の要素を格納 var xOffset = 40; //Ｘ座標のずれ具合 var yOffset = 10; //Ｙ座標のずれ具合 var arrData = [120,80,150,200,110]; //棒グラフを描画 bar = d3.select("#graph") .selectAll("rect") .data(arrData); bar.enter() .append("rect") .attr("class", "fillPink") .attr("height", function(d,i){ return d; }) .attr("width",20) .attr("x",function(d,i){ return i * 25 + xOffset; }) .attr("y",function(d,i){ //Y座標を指定 return svgHeight - d - yOffset; //Y座標を計算 }); //棒グラフの数値を描画する bar.enter() //text要素を指定 .append("text") //text要素を追加 .attr("class","barNum") //CSSクラスを指定 .attr("x",function(d,i){ //Ｘ座標を指定 return i * 25 + 10 + xOffset; //棒グラフの表示間隔に合わせる }) .attr("y", svgHeight -5 - yOffset )//Ｙ座標を指定 .text(function(d,i){ //データを表示 return d; }); //目盛り表示の為の縮尺表示 var yScale = d3.scale.linear() .domain([0,300]) .range([300,0]); d3.select("#graph") .append("g") .attr("class","axis") .attr("transform", "translate(" + xOffset + ", " + ((svgHeight - 300)- yOffset) + ")") .call( d3.svg.axis() .scale(yScale) .orient("left") /* .ticks(20) .tickValues( [10.50,30.36,50,100,200,300] ) .tickFormat(d3.format(".2f")) */ ); //横方向の線を表示する d3.select("#graph") .append("rect") .attr("class","axisX") .attr("width",300) .attr("height",1) .attr("transform","translate(" + xOffset + ", " + (svgHeight - yOffset ) + ")" ); //棒のラベルを表示する bar.enter() .append("text") .attr("class","barName") .attr("x",function(d,i){ return i * 25 + 10 + xOffset; }) .attr("y", svgHeight - yOffset + 15 ) /* 下記のコードは、ラベルはtext要素を追加することで表示します。 棒グラフ内にデータを表示します。今回のデータセットには、 データ内にラベル名の情報は含まれていません。 以下のようにすると、配列に表示するラベルの文字を格納しておき 順場に応じて返すようにします。 */ .text(function(d,i){ return ["A","B","C","D","E"][i]; }); |
目盛りの間隔を指定したい
目盛りの間隔(目盛り区切りの間隔の数値)はticks()メソッドで指定することができます、初期値は１０です。サンプルコードでは特に間隔は指定していないので１０間隔です。
サンプルコード(test.js)のコメントアウトされている箇所57行のコメントを消して実行すると20間隔に変更されます。
目盛りを異なる間隔にしたい
上記のticks()メソッドで指定すると、全て指定した値と同じ間隔になります。
これを異なる間隔にしたいときは、tickValues()メソッドを使います。
パラメーターには愛列で設定したい数値を指定します。
サンプルコード(test.js)の58行目です。
目盛りに表示する数値の書式を変更する
目盛りに表示する数値の書式を設定できます。設定するには、tickFormat()メソッドを利用します。パラメーターには関数を指定して、戻り値などを書きます、D3.jsでは数値・日時の書式を設定するd3.format()メソッドがあり、tickFormat()メソッドのパラメーターとして設定できます。サンプルコード(test.js)の58,59行目のコメントアウトを消して実行すると確認できます。