d3.js advent calendar 7日目
d3.scale.ordinal
離散的な入出力値の変換に役立ちます
「それ、連想配列?」って思った人は正解で、内部では連想配列を保持していて、それに登録/参照を行なっています
基本的な使い方
var os = d3.scale.oridnal()
.domain(["りんご", "みかん", "パイン"]).range([0, 33, 66]);
os("りんご"); // 0;
// rangeだけしかセットしなくてもOK
var os2 = d3.scale.ordinal().range("abcdefg".split("")); // domainをセットしない
os2(5); // "a": 5 => "a"が登録
os2(3); // "b":3 => "b"が登録
便利な機能: d3.scale.ordinal().rangePoints(interval[, padding])
intervalは始点と終点の2つの要素から成る配列です
これをセットしておくと、domainの登録数の変化に応じて、分割点をrangeとして再計算してくれます
これにより、例えば、グラフの描画エリアの幅が400pxだとして、入力項目数がわからない場合でも取り合えず .rangePoints([0, 400])としておいて、データを取得した時点で、domain([なんか入力値配列])をセットしておけば、それに応じて、入力配列個の点に当分割し、その値を返してくれます
実例
var os = d3.scale.ordinal().rangePoints([0, 400]);
os.domain(d3.range(0, 11));
os.range(); // [0, 40, 80, 120, 160, 200, 240, 280, 320, 360, 400]
rangePointsの使い所
- 項目数が未決定のデータを棒グラフで表現する時の棒のx座標の算出
これがベストです
rangeBands
rangePointsと似ていますが、これは端点を含み、domainの個数に当分割します
実例
var osp = d3.scale.ordinal().rangePoints([0, 400]).domain(d3.range(0, 10)).range();
// [0, 44.44, 88.89, 133.31, 177.77, 222.23, 266.63, 311.11, 355.54, 400]
var osb = d3.scale.ordinal().rangeBands([0, 400]).domain(d3.range(0, 10)).range();
// [0, 40, 80, 120, 160, 200, 240, 280, 320, 360]