将许多可能的输入值映射到离散的颜色域

Question

我无法理解 d3 ordinal scales 上的文档。我阅读它的方式（以及它对线性刻度的工作方式，我觉得我应该能够像这样进行：

color = d3.scale.ordinal();
color.domain([0, 100]);      // Input is any percentage point 0-100
color.range([                // Output is a scale of colors from "bad" to "good"
  'red','orange','blue','green'
]);

这没有给我预期的结果：

color(0); // "red". Ok, that makes sense
color(1); // "blue". Huh? This should be "red"
color(100); // "orange". Really? I'm confused. What's the range?
color.range(); //["red", "orange", "blue", "green"]. That looks right...
color.domain(); // [0,1,100]. Um...

当我想将输入视为数字时，它看起来像是将输入视为离散的分类值。

Answer 1

这个方法并不完全是它的工作原理。您列出的域将指向范围内的 2 个特定值，即 2 个第一个值 - 红色和橙色。您通过 color(n); 添加到域的任何其他值都将扩展域数组，例如。 1 被认为是第三个索引，因此它被分配到范围中的第三个项目，如果您使用 color(n) 调用另一个项目，您将获得第四个索引。这就是范围方法的工作原理。

Answer 2

将数字范围映射到离散输出的正确方法是使用 quantize。我不清楚其中的区别，序数似乎很直观。现在想通了。

可行的解决方案如下所示：

color = d3.scale.quantize();
color.domain([0, 100]);
color.range([
  'red','orange','blue','green'
]);

color(0);  // "red"
color(1);  // "red"
color(99); // "green"

这里的这些链接有助于解决这个问题：

http://roadtolarissa.com/blog/2015/01/04/coloring-maps-with-d3/
What is the difference between d3.scale.quantize() and d3.scale.quantile()?

将许多可能的输入值映射到离散的颜色域

Map many possible input values to discrete color domains

d3.js