javascript - scaleQuantile 函数没有输出我所期望的

Question

我正在使用 d3.scaleQuantile() 来获取一些特定的数字输出，d3.scaleQuantile() 的范围是一个包含 8 个数字的数组。我在范围的中间位置使用 console.log() 一个数字，它返回该范围的第一个。代码看起来像这样

var sortMass = d3.scaleQuantile()
    .domain([minMass, maxMass])
    .range([2000,4000,6000,8000,100000,120000])
console.log(sortMass(6500)) // here shows 2000

如果它返回 6000 或 8000，则更有意义。但我不明白为什么输出是 2000。我阅读了 D3 文档，但我仍然感到困惑。谁能解释一下 d3.scaleQuantile() 函数是如何工作的？

Answer 1

这里有一个误区:在D3比例尺中，任何一种比例尺，你都不会将范围内的值传递给比例尺。取而代之的是，您在 域 中传递一个值。

所以，考虑到你的规模......

var sortMass = d3.scaleQuantile()
  .domain([minMass, maxMass])
  .range([2000, 4000, 6000, 8000, 100000, 120000]);

...如果您向秤传递一个介于 minMass 和 maxMass 之间的值，它将返回该范围内的对应值。

这是一个基本演示，我将 minMass 设置为 0 并将 maxMass 设置为 100:

var minMass = 0,
  maxMass = 100;
var sortMass = d3.scaleQuantile()
  .domain([minMass, maxMass])
  .range([2000, 4000, 6000, 8000, 100000, 120000]);

d3.range(0, 110, 10).forEach(function(d) {
  console.log("for the value " + d + ", the output is:" + sortMass(d))
})

<script src="https://d3js.org/d3.v4.min.js"></script>

我怀疑您将范围限制用作 minMass 和 maxMass。如果情况确实如此，它就不会起作用:该域被分成相等 段。让我们证明一下:

var sortMass = d3.scaleQuantile()
  .domain([2000,120000])
  .range([2000, 4000, 6000, 8000, 100000, 120000]);

console.log(sortMass(6500))

<script src="https://d3js.org/d3.v4.min.js"></script>

并且输出中的 2000 是正确的预期。

因此，如果我上面的假设是正确的，您应该改用阈值比例:

var thresholds = [2000, 4000, 6000, 8000, 100000, 120000];
var sortMass = d3.scaleThreshold()
  .domain(thresholds)
  .range(thresholds);

console.log(sortMass(6500))

<script src="https://d3js.org/d3.v4.min.js"></script>

结论:

所以，回答你的问题:

Can anyone explain how the d3.scaleQuantile() function works?

对于任何 D3 比例尺，您根据域传递一个值，比例尺将根据范围返回一个值。记住:

• 域 → 是输入。
• Range → 就是输出。