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>

结论：

因此，要回答你的问题：

任何人都可以解释d3.scaleQuantile()函数的工作原理吗？

对于任何D3规模，则根据域传递值，和规模将根据范围返回一个值。记住：

• 域 →是输入。
• 范围 →是输出。