読者です 読者をやめる 読者になる 読者になる

d3.js advent calendar 7日目

d3 javascript adventcalendar

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]