d3.js advent calendar 6日目

d3.scale

d3.scaleは、おそらく大きの人がd3を使う主目的である「グラフ」を描く際に、X-Y軸や、データをグラフの矩形範囲内に収めるために利用するための重要なAPIです
またd3.scaleは2つに大別されます

d3.scale.linear(): 連続値を扱うために利用できます。順序尺度以上に使ったり、Colorの時にも例示しましたが、比率などを操作するときに有用です
d3.scale.ordinal(): 順序とあるように配列の形で順序を持ってさえいれば、離散値、名義など幅広く扱うことができます

/* function */ _linear = d3.scale.linear()

d3.scale.linear()で新たにlinear scaleメソッドを得ることができます
linear()に対して.domain([min, max]), .range([min, max])メソッドにより、domainとrangeをセットする必要があります
domainは「入力の範囲」を、rangeは「出力の範囲」を意味します
defaultではdomain/rangeともに[0, 1]になります
得られた_linearに引数を入力に対応した比率で出力を返します

実例

var x = d3.scale.linear()
 .domain([50, 100])
 .range(/* グラフを描くdiv領域のサイズ */ [0, 400])
x(25); // → -200
x(50); // → 0
x(75); // → 200
x(100); // → 400
x(200); // → 1200

.clamp(), .invert()

.clamp(/* boolean*/ isClamp): 入力値が範囲外の時の、出力値の制限をかけることができます
.invert(y): range側からdomain側への逆変換を行うことができます

実例

var x = d3.scale.linear()
 .domain([50, 100])
 .range(/* グラフを描くdiv領域のサイズ */ [0, 400])
 .clamp(true);
x(25); // → 0
x(50); // → 0
x(75); // → 200
x(100); // → 400
x(200); // → 400
x.invert(200); // → 75

その他のrangeの便利関数

.rangeRound(): 出力を整数値に丸めます
.ticks(count): 人が読みやすい(10の倍数)数の目盛の配列を返します
.nice(): これ、かなり便利です。端数の両端を持つdomainを適当に読みやすい範囲にします

実例

var x = d3.scale.linear()
 .domain([53.34, 4234.6])
 .nice() // .domain() → [0, 5000]
.rangeRound(/* グラフを描くdiv領域のサイズ */ [0, 400]) // → 整数に丸め
 .ticks(4); // → [0,1000,2000,3000,4000,5000]

その他の linear scale

d3.scale.pow(): .exponent(x)でx乗の指数 scale を作成できます(.5はsqrtになる)
d3.scale.sqrt(): d3.scale.pow().exponent(.5)のalias
d3.scale.log(): 言わずもがなの対数 scale。底の変更は各自で計算してください(今度patch送る)

d3.scale.quantize()

.domain()でセットした連続値の入力に対して、.range([values])で指定した値に、出力を量子化する際に便利です

実例

var q = d3.scale.quantize().domain([0, 10]).range([0, 10, 100, 1000, 10000])
d3.range(0, 10, 1).map(function(d){return ""+d+","+q(d);})
// ["0,0", "1,0", "2,10", "3,10", "4,100", "5,100", "6,1000", "7,1000", "8,10000", "9,10000"]