Linear scales
线性尺度通过线性转换(平移和缩放)将连续的、定量的输入域映射到连续的输出范围。如果范围也是数值型的,映射可以被反转。对于连续的定量数据,线性尺度是一个好的默认选择,因为它们保留了比例差异。每个范围值 y 可以表示为域值 x 的函数:y = mx + b。
scaleLinear(domain, range)
构造函数,需要指定 domain 和 range 。
d3.scaleLinear([0, 100], ['red', 'blue'])
如果只有一个参数那么为range,那么domain默认为[0, 1]。
d3.scaleLinear(['red', 'blue']) // default domain of [0, 1]
linear(value)
根据 domain 获取对应的 range 值。
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)"
如果domain值超出范围,并且clamp没有开启,那么返回的range值也会超出范围。
linear.invert(value)
根据 range 获取对应的 domain 值。如果 range 不是数值类型,会返回 NaN。如果 range 值超出范围,并且clamp没有开启,那么返回的 domain 值也会超出范围。
const x = d3.scaleLinear([10, 130], [0, 960])
x.invert(80) // 20
x.invert(320) // 50
linear.domain(domain)
设置或获取 domain。
domain 必须为长度大于等于2的数值数组。
const x = d3.scaleLinear().domain([10, 130])
color.domain() // [-1, 0, 1]
linear.range(range)
设置或获取 range。
range 为长度大于等于2的数组。
const x = d3.scaleLinear().range([0, 960])
x.range() // [0, 960]
linear.rangeRound(range)
同时设置 interpolator 为 interpolateRound 的快捷方法。
const x = d3.scaleLinear().rangeRound([0, 960])
linear.range(range).interpolate(d3.interpolateRound)
linear.clamp(clamp)
设置或获取 clamp。
const x = d3.scaleLinear([0, 960]).clamp(true)
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 domain
x.clamp() // true, perhaps
linear.unknown(value)
设置或获取默认值。默认为 undefined。
const color = d3.scaleLinear([0, 100], ['red', 'blue']).unknown('#ccc')
color(NaN) // "#ccc"
color.unknown() // "#ccc"
linear.interpolate(interpolate)
获取或设置range的插值方法。
const color = d3.scaleLinear(['red', 'blue']).interpolate(d3.interpolateHcl)
const color = d3.scaleLinear([-100, 0, +100], ['red', 'white', 'green'])
Two interpolators are created internally by the scale, equivalent to:
const i0 = d3.interpolate('red', 'white')
const i1 = d3.interpolate('white', 'green')
A common reason to specify a custom interpolator is to change the color space of interpolation. For example, to use HCL:
const color = d3
.scaleLinear()
.domain([10, 100])
.range(['brown', 'steelblue'])
.interpolate(d3.interpolateHcl)
Or for Cubehelix with a custom gamma:
const color = d3
.scaleLinear()
.domain([10, 100])
.range(['brown', 'steelblue'])
.interpolate(d3.interpolateCubehelix.gamma(3))
linear.ticks(count)
const x = d3.scaleLinear([10, 100], ['red', 'blue'])
x.ticks() // [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
不指定数量,默认为10。
linear.tickFormat(count, specifier)
获取或设置tickFormat。
const x = d3.scaleLinear([0.1, 1], ['red', 'blue'])
const f = x.tickFormat()
f(0.1) // "0.1"
f(1) // "1.0"
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%"]
linear.nice(count)
const x = d3.scaleLinear([0.241079, 0.969679], [0, 960]).nice()
x.domain() // [0.2, 1]
const x = d3.scaleLinear([0.241079, 0.969679], [0, 960]).nice(40)
x.domain() // [0.24, 0.98]
linear.copy()
返回拷贝。
const x1 = d3.scaleLinear([0, 100], ['red', 'blue'])
const x2 = x1.copy()