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.

开始时，我注意到根据 文档.

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

我的期望是调用 colors(0) 将始终返回第零项，colors(1) 是第一项，依此类推.但是，我观察到的是，如果我首先调用 colors(1)，则从该点开始返回第零个项目而不是第一个项目.随后调用 colors(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.

当你使用序数尺度时:

如果未设置域，则必须明确设置范围.然后，传递给 scale 函数的每个唯一值都将从输出范围中分配一个新值；换句话说，域将根据用法隐式推断.虽然域可能因此被隐式构造，

https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_domain 你可以阅读 ordinal scale 的 API 了解更多信息.

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

更新:序数比例是地图，而不是数组.

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

如果域没有显式设置，域将使用您调用 color(key) 的键序列隐式构造.

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屋！