以d3序数标度进行映射

时间:2013-06-26 13:17:29

标签: javascript css3 d3.js

我正在使用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

请告知。

2 个答案:

答案 0 :(得分:17)

域名不太正确:

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

对于ordinal scale's范围内的每个值,域中应该有匹配的值。

不是将域设置为[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

答案 1 :(得分: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));

作为documentation

  

按顺序设置域是可选的。如果没有设置域,则传递给scale函数的每个唯一值将从输出范围中分配一个新值;换句话说,域将从使用中隐式推断。 然而,分配序数量表的域以确保确定性行为是一个好主意,因为推断域的使用将依赖于排序。