d3.js - d3.scale.category10() 未按预期运行

Question

使用 d3.scale.category10() 生成 10 种固定颜色时，我遇到了意外行为。

一开始，我注意到 colors.range() 根据 documentation 返回一个正确排序的颜色数组。 .

var colors = d3.scale.category10();
console.log(colors.range());
// -> ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"] 

我的期望是调用 colors(0) 将始终返回第零项，colors(1) 第一个，依此类推。但是我观察到的是，如果我第一次调用颜色(1)，则返回第零项而不是从那时起的第一项。随后调用 colors(0) 将返回第一项而不是第零项。因此，返回值似乎与使用索引的顺序有关，而不是自然顺序。

这是一个 fiddle :http://jsfiddle.net/LqHst/

为了解决这个问题，我只是通过一个循环以正确的顺序触摸所有颜色。

for(var i = 0; i < 10; i++) {
  colors(i);
}

要么我误解了它应该如何工作，要么我对我的错误用法视而不见。我以前使用过此功能并记得遇到过预期的行为，所以我认为我只是做错了事或做出了不正确的假设。

Answer 1

你误解了 category10 的用法.

如文件所述:d3.scale.category10()构造一个具有十种分类颜色范围的新序数尺度。

也就是说:var color = d3.scale.category10()将构造一个具有空域和十种颜色范围的新序数刻度。

当您使用序数比例时:

如果未设置域，则必须明确设置范围。然后，传递给 scale 函数的每个唯一值都将从输出范围中分配一个新值；换句话说，域将从使用中隐式推断。尽管可以隐式地构造域，

https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_domain您可以阅读序数比例的 API 以获取更多信息。

更新:序数比例是 map ，而不是数组。

如果域未显式设置，则域将使用您调用颜色(键)的键序列隐式构造。

  var color = d3.scale.category10();

  console.log(color.domain()); // []

  color("aaa");
  console.log(color.domain()); // ["aaa"]

  color("bbb");
  console.log(color.domain());  // ["aaa", "bbb"]

  color("ccc");
  console.log(color.domain()); // ["aaa", "bbb", "ccc"]

当您只想为不同的集群分配不同的颜色并且没有固定的颜色映射时，这很有用。 (想一想:当你的程序支持用户上传数据文件作为数据源时。)

如果要将每个类别映射到特定颜色，则必须显式设置域，以便映射不依赖于键序列。

  var color = d3.scale.category10();

  var domain = ["bbb", "ddd", "ccc", "23", "hello"];

  color.domain(domain);

  console.log(color.domain()); // ["bbb", "ddd", "ccc", "23", "hello"] 
  console.log(color.range());  // ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"] 

  color("ddd"); // "#ff7f0e" : d3 will get index of "ddd" and return range[index]