今回はグラフに加えて目盛りを表示します。
目盛りのスタイルを決めて、設定する
目盛りや数値やラベル、線のスタイルを設定します。
コードを実際に書いて設定することもできますが、
分業しておいたほが後々、楽です。
サンプルコードの実行結果はこちら
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 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>グラフに目盛りをつけてみる</title> <style> #sampleGraph{width:100%;} /* 目盛りに適用するスタイルはここに書きます。 別個CSSファイルを作成して読み込んでもOK classについて .axis:目盛りに関するもの text:目盛りの数値 pathとlineが目盛りの線 */ .axis text{ font-family:sans-serif; font-size:16px;} .axis path, .axis line{ fill:none; stroke:black; } </style> <script src="../js/d3.js"></script> </head> <body> <h1>目盛りを表示する</h1> <svg id="sampleGraph"> </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 |
var arrData = []; for(var i = 0 ; i < 5 ; i++){ //0~299までの数値を5つ用意 arrData[i] = Math.floor( Math.random() * 300 ); } d3.select("#sampleGraph") //SVG要素を指定 .selectAll("rect") //SVGで四角形を示す要素を指定 .data(arrData) //データを設定 .enter() //データの数に応じrect要素を生成 .append("rect") //SVGで四角形を生成 .attr("x",10) //棒グラフの表示位置を10px右にずらす .attr("y", function(d,i){ return i * 25; //棒グラフの表示位置を25pxずつずらす }) .attr("height","20px") //棒グラフ(1本あたり)の高さ .attr("width" , function(d,i){ return d + "px"; //棒グラフの幅 }); //リニアスケールを設定 var xScale = d3.scale.linear() //元データ範囲 .domain([0,300]) //実際の出力サイズ .range([0,300]); //目盛りを設定して表示 d3.select("#sampleGraph") /* 目盛りを表示するには、SVG要素をグループ化する機能を使い 目盛りの線と数値、ラベルを一纏めにして処理。 グループ化することにより目盛りをまとめて移動させる ことができます、 グループ化するにはSVGのg要素を使用 g要素を使うことでg要素に内包される複数の要素を 1つのグループとして扱うことができます。 D3.jsでSVGのg要素を追加するにはappend("g")と書きます。 棒グラフ作成時にrect要素を追加する時と同じです。 */ .append("g") /* スタイルシート .axisをg要素に適用するために g要素のclass属性の値を指定 */ .attr("class", "axis") /* 目盛りは、x,y属性値を変更しても移動しません。 目盛り位置を移動させるには、transform属性に移動量を 指定しなければなりません。X方向10px,Y方向30px移動させる場合 attr("transform","translate(10,30)")とかきます。 translate()の引数は指定した数だけ、XY座標を移動させます。 */ .attr("transform","translate(10," + (( 1 + arrData.length ) * 20 + 5 ) + ")") /* 目盛りを表示するには、call()メソッドを使用 call()メソッドは引数に、呼びたい関数を呼びだします、 call()メソッドで指定した関数には処理対象となっている すべての要素が渡される。今回はg要素が1つだけ渡されています。 */ .call( d3.svg.axis() //callで目盛りを表示する関数を呼びだす .scale(xScale) //スケールを適用 .orient("bottom")//目盛りの表示位置を下側 ) |
目盛りを表示するには、いくつかの手順を踏まなければなりません。
1.使用する目盛りの種類を決めます。
直線や対数などがありますが、今回は直線的な目盛りです。
リニアスケール(一定間隔の直線的な目盛り)de,
d3.scale.linear()で生成できます。
2.スケール(縮尺)です。
データセットにあるデータの数値の範囲(元データの範囲)と
実際の表示範囲を調整します。
元データの範囲はdomain()メソッドで、
表示される範囲はrange()メソッドで設定します。
どちらのメソッドの引数は [開始値,終了値]のような配列を指定します。
サンプルコードをではデータの値と表示する値が1:1なので、
domain(),range()は同値です。