d3.js advent calendar 13日目

d3 advent calendar 13日目
d3.svg.axis

d3.svg.axis

みんな大好きxy軸です。これがないとグラフを書いても意味がわからないので、大事です。でも、位置の調整とか割りと大変だし、tickとかどうすんべー、というのをd3では予期に計らってくれています

基本

d3.svg.axis()は、.call()というAPIを'g要素'に対して適用することで軸を描くことができます
また、d3.svg.axis()は「scale」を元に作成するので、x, y軸に対応するdomain/rangeがセットされたデータのscaleを作成する必要があります

使い方(x軸の場合)

1. データのx軸に関するscaleを作成する(var x = d3.scale.linear()など)
2. var xaxis = d3.svg.axis().scale(x)としてscaleをセットする
3. xaxis.ticks(数)としてtickをセットする
4. svgタグの中にg要素を追加して、グラフを描くmarginを確保する( ←これ忘れがちです！
5. g.append('g')としてグラフ描画用のg要素を作成
6. g.append('g').call(xaxis)
7. このグラフ描画用のg要素をtransformで上か下かに移動

サンプル

var w = 600, h = 400, margin = 50;
var data; // {x: 1354, y: 34}みたいのがたくさんの配列
var x = d3.scale.linear().domain(d3.extent(data, function(d){return d.x})).range([0, w]);
var xaxis = d3.svg.axis().scale(x).ticks(6);
var g = d3.select('body').append('svg').attr('width', w + margin * 2).attr('height', h + margin * 2)
 .append('g').attr('width', w).attr('height', h);
g.append('g')
 .attr('transform', 'translate(0,'+h+')')
 .style('fill', 'none').style('stroke', 'black')
 .call(xaxis)

y軸の場合には

axis.orient('left')とすると、軸が縦になり目盛が左につきます。右の場合は右に目盛がつきます。が、位置は(0,0)なので、attrでtransformしてください。

.tickFormat

なにげに使うのがtickFormatです。関数を定義してあげると目盛につけるラベルを望んだ形に変換してくれます。あわせて、d3.time.format()を使うと良いです！

axis.tickFormat(function(d){ return new Date(2012, 11, d);})