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

时间:2015-04-19 01:55:05

标签: d3.js

我无法在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...

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

2 个答案:

答案 0 :(得分:4)

将一系列数字映射到离散输出的正确方法是使用quantize。差异对我来说并不清楚,序数似乎很直观。现在想出来。

工作解决方案如下所示:

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

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

这些链接有助于解决这个问题:

答案 1 :(得分:2)

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