作成者Observable

外観

目盛り ​

連続間隔から代表的な値を生成します。

ticks(start, stop, count) ​

例 · ソース · start と stop の間（両端を含む）に、ほぼ count + 1 個の均等に間隔を空けた、きれいに丸められた値の配列を返します。各値は、1、2、または5を10のべき乗で掛けたものです。

js
d3.ticks(1, 9, 5) // [2, 4, 6, 8]
js
d3.ticks(1, 9, 20) // [1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9]

目盛りは、指定された start および stop の値が、推測される ステップ と一致する正確で、きれいに丸められた値である場合（およびその場合にのみ）それらを含めるという意味で包括的です。より形式的には、返される各目盛り t は、start ≤ t かつ t ≤ stop を満たします。

tickIncrement(start, stop, count) ​

ソース · d3.tickStep に似ていますが、start が常に stop 以下であることが必要で、指定された start、stop、および count の目盛りステップが1未満になる場合は、代わりに負の逆目盛りステップを返します。

js
d3.tickIncrement(1, 9, 5) // 2
js
d3.tickIncrement(1, 9, 20) // -2, meaning a tick step 0.5

このメソッドは常に整数を返すことが保証されており、d3.ticks で、返された目盛り値が IEEE 754 浮動小数点数で可能な限り正確に表現されることを保証するために使用されます。

tickStep(start, stop, count) ​

ソース · 同じ引数が d3.ticks に渡された場合に、隣接する目盛り値の差を返します。1、2、または5を10のべき乗で掛けた、きれいに丸められた値です。

js
d3.tickStep(1, 9, 5) // 2

stop が start より小さい場合は、降順の目盛りを示すために負の目盛りステップを返す場合があります。

js
d3.tickStep(9, 1, 5) // -2

IEEE 754 浮動小数点の精度が限られているため、返される値が正確な10進数ではない場合があることに注意してください。人間が理解しやすいように数値を書式設定するには、d3-format を使用してください。

nice(start, stop, count) ​

ソース · 指定された間隔 [start, stop] をカバーする新しい間隔 [niceStart, niceStop] を返します。niceStart および niceStop は、対応する 目盛りステップ に揃うことが保証されています。

js
d3.nice(1, 9, 5) // [0, 10]

d3.tickIncrement と同様に、これには start が stop 以下であることが必要です。

range(start, stop, step) ​

例 · ソース · Python の組み込み range と同様に、等差数列を含む配列を返します。このメソッドは、配列のインデックスや線形スケールの目盛りなど、均等に間隔を空けた数値のシーケンスを反復処理するために頻繁に使用されます。（きれいに丸められた値については、d3.ticks も参照してください。）

js
d3.range(6) // [0, 1, 2, 3, 4, 5]

step が省略された場合、デフォルトは1になります。start が省略された場合、デフォルトは0になります。stop 値は排他的であり、結果には含まれません。step が正の場合、最後の要素は stop より小さい最大の start + i * step です。step が負の場合、最後の要素は stop より大きい最小の start + i * step です。

js
d3.range(5, -1, -1) // [5, 4, 3, 2, 1, 0]

返される配列に無限数の値が含まれる場合、空の範囲が返されます。

js
d3.range(Infinity) // []

引数は整数である必要はありません。ただし、整数である場合の方が結果は予測しやすくなります。返される配列の値は、start + i * step として定義されます。ここで、i はゼロから返される配列の要素の合計数から1を引いた整数です。

js
d3.range(0, 1, 0.2) // [0, 0.2, 0.4, 0.6000000000000001, 0.8]

この動作は、0.2 * 3 = 0.6000000000000001を定義する IEEE 754 倍精度浮動小数点数が原因です。適切な丸めで人間が理解しやすいように数値を書式設定するには、d3-format を使用してください。linear.tickFormat（d3-scale 内）も参照してください。同様に、返される配列に特定の長さが必要な場合は、整数範囲で array.map を使用することを検討してください。

js
d3.range(0, 1, 1 / 49) // 👎 returns 50 elements!
js
d3.range(49).map((d) => d / 49) // 👍 returns 49 elements