3

我正在使用 D3 的序数比例，将数字映射到颜色。我用过这个：

color = d3.scale.ordinal().range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2"]).domain([0,6]);
console.log(color(0),color(1),color(2),color(3),color(4),color(5),color(6));

我得到的回应是：

#1f77b4 #2ca02c #d62728 #9467bd #8c564b #e377c2 #ff7f0e

我很好奇不应该是这样的反应：

#1f77b4, #ff7f0e, #2ca02c, #d62728, #9467bd, #8c564b, #e377c2

请指教。

4

2 回答 2

17

域不太正确：

> color.domain()
[0, 6, 1, 0.5]

对于序数尺度范围内的每个值，域中都应该有一个匹配值。

而不是将域设置为[0,6]，它应该是[0, 1, 2, 3, 4, 5, 6]：

color = d3.scale.ordinal()
          .range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2"])
          .domain(d3.range(0,7));

检查以确保更新颜色后一切正常：

> d3.range(0,7).forEach(function(d){ console.log(color(d)); })
#1f77b4
#ff7f0e
#2ca02c
#d62728
#9467bd
#8c564b
#e377c2
于 2013-06-26T14:12:06.830 回答
2

这是意料之中的，因为您的域中只有 2 个明确定义的值。因此，第一个值 0 分配给 的第一种颜色#1f77b4，第二个值 6 分配给第二种颜色 ，#ff7f0e余数在内部排序为字符串后推断。您需要为可预测的行为明确定义域。例如，

color = d3.scale.ordinal()
  .range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2"])
  .domain([0,1,2,3,4,5,6]);

console.log(color(0),color(1),color(2),color(3),color(4),color(5),color(6));

正如文档 所述

以序数比例设置域是可选的。如果未设置域，则传递给 scale 函数的每个唯一值都将被分配一个来自输出范围的新值；换句话说，域将从使用中隐式推断。但是，分配序数尺度的域以确保确定性行为是一个好主意，因为从使用中推断域将取决于排序。

于 2013-06-26T14:19:12.627 回答