d3.scale.category10（）的行为不如预期 [英] d3.scale.category10() not behaving as expected

问题描述

当使用d3.scale.category10（）生成10种固定颜色时，遇到意外的行为。

I'm encountering unexpected behavior when using d3.scale.category10() to generate 10 fixed colors.

开始，我注意到colors.range（）返回一个正确排序的颜色数组，根据文档。

Starting out, I note that colors.range() returns an array of properly ordered colors, according to the documentation.

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

我希望调用颜色（0）总是返回第零项，颜色第一，等等。但是我观察的是，如果我首先调用颜色（1），则返回第零项，而不是从该点开始的第一项。随后调用颜色（0）将返回第一项而不是零。因此，看起来返回值绑定到使用索引的顺序，而不是自然顺序。

My expectation is that calling colors(0) will always return the zeroth item, colors(1) the first, and so on. However what I'm observing is that if I first call colors(1), the zeroth item is returned instead of the first from that point onward. Subsequently calling colors(0) will return the first item instead of the zeroth. So it appears that the return value is bound to the order that the indices are used, instead of the natural order.

这里是一个小提琴： http://jsfiddle.net/LqHst /

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

To work around this, I'm just stepping through a loop to touch all the colors in the correct order.

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

我误解了这应该如何工作，我的不正确的使用。我以前使用过这个功能，并记得遇到预期的行为，所以我认为我只是做错了一个错误或作出不正确的假设。

Either I'm misunderstanding how this should work, or I'm blind to my incorrect usage. I've used this feature before and remember encountering the expected behavior, so I think I'm just doing something wrong or making an incorrect assumption.

推荐答案

您误解 category10 的用法。

正如文件所述： d3.scale.category10（）构造一个包含十个分类颜色范围的新序数量表。

As the document mentioned: d3.scale.category10() constructs a new ordinal scale with a range of ten categorical colors.

这就是说： var color = d3.scale.category10（）将构造一个具有十个颜色的空域和范围的新序数标度。

That is to say: var color = d3.scale.category10() will construct a new ordinal scale with empty domain and range with ten colors.

使用顺序标尺时：

如果未设置域，则必须显式设置范围。然后，传递给比例函数的每个唯一值将从输出范围中分配一个新值;换句话说，域将从使用中隐式推断。虽然域可以隐式构造，

https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_domain ，您可以阅读有关详细信息的序数标尺API。

https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_domain you can read the API of ordinal scale for more information.

更新： ordinal-scale是一个地图，不是数组。

Update: an ordinal-scale is a map, not an array.

该域将使用您调用颜色（键）的键序列隐式构造。

If domain is not set explicit, the domain will be construct implicit with the key sequence you invoke color(key).

  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"]

想为不同的集群分配不同的颜色，并且没有固定的颜色映射。 （想想情况：当你的程序支持用户上传数据文件作为数据源。）

This is useful when you just want to assign a different color for different clusters, and don't have a fixed color mapping. (Think about the situation: when your program support user upload data file as the data source.)

如果你想将每个类别映射到特定的颜色，你必须设置

If you want to map each category to specific color, you have to set the domain explicit so that the mapping is not depend on the sequence of keys.

  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]

这篇关于d3.scale.category10（）的行为不如预期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！