グラフのサイズなど前回の記事では、コード内を色々な箇所を修正しました。毎回それをやると大変なので、修正が容易なグラフを表示するプログラムを書いていきます。
サンプルコードの実行結果はこちら
|
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:320px; 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 87 88 89 90 91 92 93 94 95 |
/* コードの数値を直接修正するのは大変なので 変数を用意することで、変数宣言時に代入される 数値を修正するだけで済むようにする。 */ var svgWidth =320 //svg要素の幅 var svgHeight = 320; //svg要素の高さ var xOffset = 40; //Ｘ座標のずれ具合 var yOffset = 10; //Ｙ座標のずれ具合 var bar; //棒グラフの棒の要素を格納 var arrData = [120,80,150,200,110,260,220,40,100]; var maxNum = 300; var barWidth = 20; var barMargin = 5; //棒グラフを描画 bar = d3.select("#graph") .selectAll("rect") .data(arrData); bar.enter() .append("rect") .attr("class", "fillPink") .attr("height", function(d,i){ return d; }) .attr("width",barWidth) .attr("x",function(d,i){ return i * (barWidth + barMargin) + 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 * (barWidth + barMargin) + 10 + xOffset; //棒グラフの表示間隔に合わせる }) .attr("y", svgHeight -5 - yOffset )//Ｙ座標を指定 .text(function(d,i){ //データを表示 return d; }); //目盛り表示の為の縮尺表示 var yScale = d3.scale.linear() .domain([0,maxNum]) .range([maxNum,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","F","G","H","I"][i]; }); |