コンテンツへスキップ

Quantize スケール

Quantize スケールは線形スケールに似ていますが、連続的な範囲ではなく離散的な範囲を使用します。連続的な入力ドメインは、出力範囲の値の数(つまり、出力範囲のカーディナリティ)に基づいて均一なセグメントに分割されます。各範囲値 *y* は、ドメイン値 *x* の量子化された線形関数として表すことができます。*y* = *m round(x)* + *b*。量子化されたクロソプレースの例を参照してください。

scaleQuantize(ドメイン, 範囲)

· ソース · 指定されたドメイン範囲で新しい Quantize スケールを作成します。

js
const color = d3.scaleQuantize([0, 100], d3.schemeBlues[9]);

ドメインまたは範囲のいずれかが指定されていない場合、それぞれ [0, 1] がデフォルトになります。

js
const color = d3.scaleQuantize(d3.schemeBlues[9]);

quantize()

· ソース · 入力ドメインが与えられると、出力範囲に対応する値を返します。たとえば、色のエンコーディングを適用するには

js
const color = d3.scaleQuantize([0, 1], ["brown", "steelblue"]);
color(0.49); // "brown"
color(0.51); // "steelblue"

または、ドメインを3つの等しいサイズの部分に分割し、異なる範囲の値を使用して適切なストローク幅を計算します。

js
const width = d3.scaleQuantize([10, 100], [1, 2, 4]);
width(20); // 1
width(50); // 2
width(80); // 4

quantize.invertExtent()

· ソース · 範囲の対応するに対してドメイン [x0, x1] の値の範囲を返します。quantizeの逆関数です。このメソッドは、インタラクション(たとえば、マウスの下にあるピクセル位置に対応するドメイン内の値を決定するなど)に役立ちます。

js
const width = d3.scaleQuantize([10, 100], [1, 2, 4]);
width.invertExtent(2); // [40, 70]

quantize.domain(ドメイン)

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

js
const color = d3.scaleQuantize(d3.schemeBlues[9]);
color.domain([0, 100]);

指定された配列の要素が数値でない場合、数値に変換されます。数値は昇順でなければならず、そうでない場合、スケールの動作は未定義になります。

ドメインが指定されていない場合、スケールの現在のドメインを返します。

js
color.domain() // [0, 100]

quantize.range(範囲)

· ソース · 範囲が指定されている場合、スケールの範囲を指定された値の配列に設定します。

js
const color = d3.scaleQuantize();
color.range(d3.schemeBlues[5]);

配列には任意の数の離散値を含めることができます。指定された配列の要素は数値である必要はありません。任意の値または型が機能します。

範囲が指定されていない場合、スケールの現在の範囲を返します。

js
color.range() // ["#eff3ff", "#bdd7e7", "#6baed6", "#3182bd", "#08519c"]

quantize.thresholds()

· ソース · ドメイン内の計算された閾値の配列を返します。

js
color.thresholds() // [0.2, 0.4, 0.6, 0.8]

返される閾値の数は、範囲の長さより1つ少なくなります。最初の閾値より小さい値には範囲の最初の要素が割り当てられ、最後の閾値以上の値には範囲の最後の要素が割り当てられます。

quantize.copy()

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

js
const c1 = d3.scaleQuantize(d3.schemeBlues[5]);
const c2 = c1.copy();

このスケールに対する変更は、返されたスケールには影響しません。その逆も同様です。