バンドスケール

バンドスケールは、出力範囲が連続的で数値である点を除いて、順序スケールに似ています。スケールは連続範囲を均一なバンドに分割します。バンドスケールは通常、順序またはカテゴリカルな次元を持つ棒グラフに使用されます。

scaleBand(domain, range)

例 · ソース · 指定されたdomainとrange、パディングなし、丸めなし、および中央のアラインメントで、新しいバンドスケールを構築します。

const x = d3.scaleBand(["a", "b", "c"], [0, 960]);

単一の引数が指定された場合、それはrangeとして解釈されます。domainが指定されていない場合、空のドメインがデフォルトになります。rangeが指定されていない場合、単位範囲[0, 1]がデフォルトになります。

band(value)

例 · ソース · 入力ドメインのvalueが与えられた場合、出力範囲から導出された対応するバンドの開始位置を返します。

const x = d3.scaleBand(["a", "b", "c"], [0, 960]);
x("a"); // 0
x("b"); // 320
x("c"); // 640
x("d"); // undefined

与えられたvalueがスケールのドメインにない場合、未定義を返します。

band.domain(domain)

ドメイン

例 · ソース · domainが指定されている場合、ドメインを指定された値の配列に設定し、このスケールを返します。

const x = d3.scaleBand([0, 960]).domain(["a", "b", "c", "d", "e", "f"]);

domainの最初の要素は最初のバンドにマップされ、2番目のドメイン値は2番目のバンドにマップされ、以下同様です。ドメイン値は、プリミティブ値からインデックスへのInternMapに内部的に格納されます。結果のインデックスは、バンドを決定するために使用されます。したがって、バンドスケールの値はプリミティブ値に強制変換可能でなければならず、プリミティブドメイン値は対応するバンドを一意に識別します。domainが指定されていない場合、このメソッドは現在のドメインを返します。

band.range(range)

例 · ソース · rangeが指定されている場合、スケールの範囲を指定された2要素の数値配列に設定し、このスケールを返します。

const x = d3.scaleBand().range([0, 960]);

指定された配列の要素が数値でない場合、数値に強制変換されます。rangeが指定されていない場合、スケールの現在の範囲（デフォルトは[0, 1]）を返します。

band.rangeRound(range)

例 · ソース · スケールのrangeを指定された2要素の数値配列に設定すると同時に、丸めを有効にします。このスケールを返します。

const x = d3.scaleBand().rangeRound([0, 960]);

これは、次のと同等の便利なメソッドです。

band.range(range).round(true)

丸めは、アンチエイリアシングのアーティファクトを回避するのに役立つ場合がありますが、shape-renderingの「crispEdges」スタイルも検討してください。

band.round(round)

丸め

例 · ソース · roundが指定されている場合、それに応じて丸めを有効または無効にし、このスケールを返します。

const x = d3.scaleBand(["a", "b", "c"], [0, 960]).round(false);

roundが指定されていない場合、丸めが有効かどうかを返します。

x.round() // false

丸めが有効になっている場合、各バンドの開始位置と終了位置は整数になります。丸めは、アンチエイリアシングのアーティファクトを回避するのに役立つ場合がありますが、shape-renderingの「crispEdges」スタイルも検討してください。ドメインの幅が範囲のカーディナリティの倍数でない場合、パディングがなくても未使用のスペースが残る可能性があることに注意してください。band.alignを使用して、未使用のスペースをどのように分散するかを指定します。

band.paddingInner(padding)

内側のパディング0.10

例 · ソース · paddingが指定されている場合、内側のパディングを指定された数値に設定します。この数値は1以下でなければならず、このスケールを返します。

const x = d3.scaleBand(["a", "b", "c"], [0, 960]).paddingInner(0.1);

paddingが指定されていない場合、デフォルトで0になる現在の内側のパディングを返します。

x.paddingInner() // 0.1

内側のパディングは、バンド間の空白スペース用に予約された範囲の割合を指定します。値が0の場合、バンド間に空白スペースがないことを意味し、値が1の場合、バンド幅がゼロになることを意味します。

band.paddingOuter(padding)

外側のパディング0.10

例 · ソース · paddingが指定されている場合、外側のパディングを指定された数値に設定します。この数値は通常[0, 1]の範囲にあり、このスケールを返します。

const x = d3.scaleBand(["a", "b", "c"], [0, 960]).paddingOuter(0.1);

paddingが指定されていない場合、デフォルトで0になる現在の外側のパディングを返します。

x.paddingOuter() // 0.1

外側のパディングは、最初のバンドの前と最後のバンドの後に予約する空白スペースの量を、ステップの倍数で指定します。

band.padding(padding)

パディング0.10

例 · ソース · 内側と外側のパディングを同じpadding値に設定するための便利なメソッド。

const x = d3.scaleBand(["a", "b", "c"], [0, 960]).padding(0.1);

paddingが指定されていない場合、内側のパディングを返します。

x.padding() // 0.1

band.align(align)

アラインメント0.50

例 · ソース · alignが指定されている場合、アラインメントを指定された値（[0, 1]の範囲内）に設定し、このスケールを返します。

const x = d3.scaleBand(["a", "b", "c"], [0, 960]).align(0.5);

alignが指定されていない場合、デフォルトで0.5になる現在のアラインメントを返します。

x.align() // 0.5

アラインメントは、外側のパディングが範囲内でどのように分散されるかを指定します。値が0.5の場合、外側のパディングは最初のバンドの前と最後のバンドの後に等しく分散される必要があることを示します。つまり、バンドは範囲内の中央に配置される必要があります。0または1の値を使用して、バンドを一方の側にシフトさせることができます。たとえば、軸に隣接して配置する場合などです。詳細については、この解説をご覧ください。

band.bandwidth()

例 · ソース · 各バンドの幅を返します。

x.bandwidth() // 50.8235294117647

band.step()

例 · ソース · 隣接するバンドの開始位置間の距離を返します。

x.step() // 63.529411764705884

band.copy()

例 · ソース · このスケールの正確なコピーを返します。

const x1 = d3.scaleBand(["a", "b", "c"], [0, 960]);
const x2 = x1.copy();

このスケールへの変更は、返されたスケールに影響を与えず、その逆も同様です。