跳到主要内容

Linear scales

线性尺度通过线性转换(平移和缩放)将连续的、定量的输入映射到连续的输出范围。如果范围也是数值型的,映射可以被反转。对于连续的定量数据,线性尺度是一个好的默认选择,因为它们保留了比例差异。每个范围值 y 可以表示为域值 x 的函数:y = mx + b

scaleLinear(domain, range)

构造函数,需要指定 domainrange

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)

同时设置 interpolatorinterpolateRound 的快捷方法。

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()

tickFormat(start, stop, count, specifier)

scaleIdentity(range)

scaleRadial(domain, range)