关于 d3.js：d3.scale.quantize() 和 d3.scale.quantile() 有什么区别？

What is the difference between d3.scale.quantize() and d3.scale.quantile()?

从文档中，定义是：

量化

..a variant of linear scales with a discrete rather than continuous range. The input domain is still continuous, and divided into uniform segments based on the number of values in (the cardinality of) the output range.

分位数

...map an input domain to a discrete range. Although the input domain is continuous and the scale will accept any reasonable input value, the input domain is specified as a discrete set of values. The number of values in (the cardinality of) the output range determines the number of quantiles that will be computed from the input domain

这些似乎都将连续输入域映射到一组离散值。谁能说明一下区别？

一般来说，差值类似于均值和中位数的差值。

只有当输入域中的值的数量大于输出域中的值的数量时，这种差异才真正明显。最好用一个例子来说明。

对于quantize标度，输入范围根据输出范围被分成统一的段。也就是说，域中的值的数量并不重要。因此它为 0.2 返回 1，因为 0.2 比 100 更接近 1。

quantile 比例基于输入域的分位数，因此受其中值数量的影响。输出域中的值数量仅决定计算多少分位数。就其本质而言，分位数反映了实际的值列表，而不仅仅是范围。因此，0.2 的输入返回 100，因为相应的分位数更接近 100。

着色图有一个很好的视觉解释。

量化：

分位数：

On the scatter plot, the previously horizontal bars are now vertical as the colors of each place is determined by its rank, not value.

这是 D3 v4 中的代码片段，它显示了 quantize 和 quantile 的不同结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const purples = [
'purple1',
'purple2',
'purple3',
'purple4',
'purple5'
]
const dataset = [1, 1, 1, 1, 2, 3, 4, 5] // try [1, 2, 3, 4, 5] as well
const quantize = d3.scaleQuantize()
.domain(d3.extent(dataset)) // pass the min and max of the dataset
.range(purples)
const quantile = d3.scaleQuantile()
.domain(dataset) // pass the entire dataset
.range(purples)
console.log(quantize(3)) // purples[3]
console.log(quantile(3)) // purples[4]

我自己也有同样的问题。所以我做了一个可视化来帮助理解它们是如何工作的。

Understanding