byObservable線形スケール
線形スケールは、連続的な量的入力ドメインを、線形変換（平行移動とスケーリング）を使用して連続的な出力レンジにマッピングします。レンジも数値の場合、マッピングは反転される可能性があります。線形スケールは、比例的な差異を維持するため、連続的な量的データには優れたデフォルトの選択肢です。各レンジ値 *y* は、ドメイン値 *x* の関数として表すことができます：*y* = *mx* + *b*。
scaleLinear(domain, range)
例 · ソースコード · 指定されたドメインとレンジ、デフォルトの補間関数、およびクランプが無効化された新しい線形スケールを構築します。
d3.scaleLinear([0, 100], ["red", "blue"])引数が1つだけ指定されている場合、それはレンジとして解釈されます。ドメインまたはレンジが指定されていない場合、それぞれ[0, 1]がデフォルトになります。
d3.scaleLinear(["red", "blue"]) // default domain of [0, 1]linear(value)
例 · ソースコード · ドメインからvalueを指定すると、対応するレンジの値を返します。例えば、位置エンコーディングを適用するには
const x = d3.scaleLinear([10, 130], [0, 960]);
x(20); // 80
x(50); // 320色エンコーディングを適用するには
const color = d3.scaleLinear([10, 100], ["brown", "steelblue"]);
color(20); // "rgb(154, 52, 57)"
color(50); // "rgb(123, 81, 103)"指定されたvalueがドメインの外側にあり、クランプが無効になっている場合、マッピングは外挿され、返される値はレンジの外側になります。
linear.invert(value)
例 · ソースコード · レンジからvalueを指定すると、対応するドメインの値を返します。反転はインタラクションに役立ちます。例えば、マウスの位置に対応するデータ値を決定するために使用します。例えば、位置エンコーディングを反転するには
const x = d3.scaleLinear([10, 130], [0, 960]);
x.invert(80); // 20
x.invert(320); // 50指定されたvalueがレンジの外側にあり、クランプが無効になっている場合、マッピングは外挿され、返される値はドメインの外側になる可能性があります。このメソッドは、レンジが数値の場合にのみサポートされます。レンジが数値でない場合、NaNを返します。
レンジ内の有効な値 *y* について、linear(linear.invert(y)) は *y* とほぼ等しくなります。同様に、ドメイン内の有効な値 *x* について、linear.invert(linear(x)) は *x* とほぼ等しくなります。浮動小数点の精度制限のため、スケールとその逆関数は正確ではない場合があります。
linear.domain(domain)
例 · ソースコード · domainが指定されている場合、スケールのドメインを指定された数値の配列に設定し、このスケールを返します。
const x = d3.scaleLinear().domain([10, 130]);配列には2つ以上の要素を含める必要があります。指定された配列の要素が数値でない場合、数値に変換されます。
連続スケールは通常、ドメインとレンジにそれぞれ2つの値を持ちますが、2つ以上の値を指定すると、区分線形スケールが生成されます。例えば、負の値に対して白と赤の間、正の値に対して白と緑の間を補間する発散色スケールを作成するには、以下のようにします。
const color = d3.scaleLinear([-1, 0, 1], ["red", "white", "green"]);
color(-0.5); // "rgb(255, 128, 128)"
color(+0.5); // "rgb(128, 192, 128)"内部的には、区分線形スケールは、指定されたドメイン値に対応するレンジ補間関数の二分探索を実行します。そのため、ドメインは昇順または降順である必要があります。ドメインとレンジの長さが *N* と *M* で異なる場合、各々の最初の *min(N,M)* 要素のみが考慮されます。
domainが指定されていない場合、スケールの現在のドメインのコピーを返します。
color.domain() // [-1, 0, 1]linear.range(range)
例 · ソースコード · rangeが指定されている場合、スケールのレンジを指定された値の配列に設定し、このスケールを返します。
const x = d3.scaleLinear().range([0, 960]);配列には2つ以上の要素を含める必要があります。ドメインとは異なり、指定された配列の要素は数値である必要はありません。基になる補間関数でサポートされている値であれば機能しますが、invertには数値のレンジが必要であることに注意してください。
rangeが指定されていない場合、スケールの現在のレンジのコピーを返します。
x.range() // [0, 960]linear.interpolateを参照してください。
linear.rangeRound(range)
例 · ソースコード · スケールのrangeを指定された値の配列に設定し、同時にスケールの補間関数をinterpolateRoundに設定します。このスケールを返します。
const x = d3.scaleLinear().rangeRound([0, 960]);これは、以下のものと等価な便利なメソッドです。
linear.range(range).interpolate(d3.interpolateRound)丸め補間関数は、アンチエイリアシングアーティファクトを回避するために役立つことがありますが、shape-renderingの "crispEdges" スタイルも考慮してください。この補間関数は、数値のレンジでのみ使用できることに注意してください。
linear.clamp(clamp)
例 · ソースコード · clampが指定されている場合、それに応じてクランプを有効または無効にします。このスケールを返します。
const x = d3.scaleLinear([0, 960]).clamp(true);クランプが無効になっていて、スケールにドメインの外側の値が渡された場合、スケールは外挿によってレンジの外側の値を返す可能性があります。クランプが有効になっている場合、スケールの戻り値は常にスケールのレンジ内にあります。クランプはlinear.invertにも同様に適用されます。例えば
const x = d3.scaleLinear([10, 130], [0, 960]); // clamping disabled by default
x(-10); // -160, outside range
x.invert(-160); // -10, outside domain
x.clamp(true); // enable clamping
x(-10); // 0, clamped to range
x.invert(-160); // 10, clamped to domainclampが指定されていない場合、スケールが現在値をレンジ内にクランプしているかどうかを返します。
x.clamp() // true, perhapslinear.unknown(value)
例 · ソースコード · valueが指定されている場合、定義されていないかNaNの入力値に対するスケールの出力値を設定し、このスケールを返します。これは、欠損データや無効なデータの表示方法を指定するのに役立ちます。
const color = d3.scaleLinear([0, 100], ["red", "blue"]).unknown("#ccc");
color(NaN); // "#ccc"valueが指定されていない場合、現在のunknown値を返します。デフォルトはundefinedです。
color.unknown() // "#ccc"linear.interpolate(interpolate)
例 · ソースコード · interpolateが指定されている場合、スケールのレンジ補間関数ファクトリを設定します。
const color = d3.scaleLinear(["red", "blue"]).interpolate(d3.interpolateHcl);スケールの補間関数ファクトリは、レンジの隣接する値のペアごとに補間関数の作成に使用されます。これらの補間関数は、正規化されたドメインパラメータ *t* ([0, 1])をレンジの対応する値にマッピングします。factoryが指定されていない場合、スケールの現在の補間関数ファクトリを返します。デフォルトはd3.interpolateです。d3-interpolateを参照してください。
例えば、レンジに3つの色を持つ発散色スケールを考えてみましょう。
const color = d3.scaleLinear([-100, 0, +100], ["red", "white", "green"]);スケールによって内部的に作成される2つの補間関数は、以下と同等です。
const i0 = d3.interpolate("red", "white");
const i1 = d3.interpolate("white", "green");カスタム補間関数を指定する一般的な理由は、補間の色空間を変更することです。例えば、HCLを使用するには
const color = d3.scaleLinear()
.domain([10, 100])
.range(["brown", "steelblue"])
.interpolate(d3.interpolateHcl);または、カスタムガンマを持つCubehelixを使用するには
const color = d3.scaleLinear()
.domain([10, 100])
.range(["brown", "steelblue"])
.interpolate(d3.interpolateCubehelix.gamma(3));注意
デフォルトのインターポレーターは値の補間器を再利用する場合があります。例えば、範囲の値がオブジェクトの場合、値のインターポレーターは常に同じオブジェクトを返し、そのオブジェクトをインプレースで変更します。スケールを使用して属性やスタイルを設定する場合、これは通常許容範囲内であり（パフォーマンスの観点からも望ましい）、しかし、スケールの戻り値を保存する必要がある場合は、独自のインターポレーターを指定するか、必要に応じてコピーを作成する必要があります。
linear.ticks(count)
例 · ソースコード · スケールのドメインから、およそcount個の代表的な値を返します。
const x = d3.scaleLinear([10, 100], ["red", "blue"]);
x.ticks(); // [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]countが指定されていない場合、デフォルトは10になります。返されるティック値は均等に間隔が空いており、人間が読みやすい値（10の累乗の倍数など）を持ち、ドメインの範囲内にあることが保証されています。ティックは、視覚化されたデータと組み合わせて、参照線やティックマークを表示するために頻繁に使用されます。指定されたcountはヒントに過ぎません。ドメインによっては、スケールがそれより多くまたは少ない値を返す場合があります。d3-arrayのticksも参照してください。
linear.tickFormat(count, specifier)
例 · ソースコード · ティック値の表示に適した数値フォーマット関数を返します。ティック値間の固定間隔に基づいて、適切な精度を自動的に計算します。指定されたcountは、ティック値を生成するために使用されるカウントと同じ値である必要があります。
const x = d3.scaleLinear([0.1, 1], ["red", "blue"]);
const f = x.tickFormat();
f(0.1); // "0.1"
f(1); // "1.0"オプションのspecifierを使用すると、カスタムフォーマットを指定できます。この場合、フォーマットの精度は、ティック間隔に合わせてスケールによって自動的に設定されます。たとえば、パーセンテージの変化をフォーマットするには、次のように記述します。
const x = d3.scaleLinear([-1, 1], [0, 960]);
const T = x.ticks(5); // [-1, -0.5, 0, 0.5, 1]
const f = x.tickFormat(5, "+%");
T.map(f); // ["−100%", "−50%", "+0%", "+50%", "+100%"]specifierがフォーマットタイプsを使用する場合、スケールはドメイン内の最大値に基づいてSI接頭辞フォーマットを返します。specifierで精度が既に指定されている場合、このメソッドはlocale.formatと同じになります。
d3.tickFormatも参照してください。
linear.nice(count)
例 · ソースコード · ドメインを拡張して、開始値と終了値が適切な丸められた値になるようにします。
const x = d3.scaleLinear([0.241079, 0.969679], [0, 960]).nice();
x.domain(); // [0.2, 1]このメソッドは通常、スケールのドメインを変更し、境界を最も近い丸められた値にのみ拡張する場合があります。ナイシングは、ドメインがデータから計算されている場合（たとえば、extentを使用している場合）に不規則になる可能性があり、便利です。ドメインに3つ以上の値がある場合、ドメインのナイシングは最初の値と最後の値のみに影響します。
オプションのティックcount引数を使用すると、境界を拡張するために使用されるステップサイズをより詳細に制御でき、返されるティックがドメインを正確にカバーすることが保証されます。
const x = d3.scaleLinear([0.241079, 0.969679], [0, 960]).nice(40);
x.domain(); // [0.24, 0.98]スケールのナイシングは、現在のドメインのみを変更します。linear.domainを使用して後で設定されたドメインは、自動的にナイシングされません。必要に応じて、新しいドメインを設定した後にスケールを再ナイシングする必要があります。
linear.copy()
例 · ソースコード · このスケールの完全なコピーを返します。
const x1 = d3.scaleLinear([0, 100], ["red", "blue"]);
const x2 = x1.copy();このスケールへの変更は、返されたスケールに影響せず、その逆も同様です。
tickFormat(start, stop, count, specifier)
例 · ソースコード · d3.tickStepによって決定される、ティック値間の固定間隔に基づいて、適切な精度を自動的に計算する、ティック値の表示に適した数値フォーマット関数を返します。
const f = d3.tickFormat(0, 1, 20);
f(1); // "1.00"オプションのspecifierを使用すると、カスタムフォーマットを指定できます。この場合、フォーマットの精度は、ティック間隔に合わせてスケールによって自動的に設定されます。たとえば、パーセンテージの変化をフォーマットするには、次のように記述します。
const f = d3.tickFormat(-1, 1, 5, "+%");
f(-0.5); // "-50%"specifierがフォーマットタイプsを使用する場合、スケールはstartとstopの絶対値の大きい方に基づいてSI接頭辞フォーマットを返します。specifierで精度が既に指定されている場合、このメソッドはlocale.formatと同じになります。
scaleIdentity(range)
例 · ソースコード · 指定された範囲（および拡張によりドメイン）を持つ新しいアイデンティティスケールを構築します。
const x = d3.scaleIdentity([0, 960]);アイデンティティスケールは、ドメインと範囲が同一である線形スケールの特殊なケースです。そのため、スケールとその逆関数は、恒等関数になります。これらのスケールは、軸と組み合わせてピクセル座標を扱う場合などに、時々役立ちます。アイデンティティスケールはrangeRound、clamp、またはinterpolateをサポートしていません。
rangeが指定されていない場合、デフォルトは[0, 1]になります。
scaleRadial(domain, range)
例 · ソースコード · 指定されたドメインと範囲を持つ新しい放射状スケールを構築します。
const r = d3.scaleRadial([100, 200], [0, 480]);放射状スケールは、範囲が内部的に2乗される線形スケールのバリアントであり、入力値が2乗された出力値に線形に対応します。これらのスケールは、入力値をグラフィックマークの面積に対応させ、マークが半径で指定されている場合（放射状バーチャートなど）に役立ちます。放射状スケールはinterpolateをサポートしていません。
domainまたはrangeが指定されていない場合、それぞれ[0, 1]がデフォルトになります。