1

这是我对D3中category10函数的困惑（jsfiddle-demo）：

> var a = d3.scale.category10()
> a(0)
"#1f77b4"
> a(10) //the expected different color value
"#2ca02c"

如果我直接调用调用的返回函数category10，事情是这样的

> d3.scale.category10()(0)
"#1f77b4"
> d3.scale.category10()(10) //the SAME color! Why?
"#1f77b4"

在我看来，调用d3.scale.category10()(10)应该产生与调用相同的值a(10)。

这里出了什么问题？

4

1 回答 1

5

每次调用d3.scale.category10()都会返回一个新的序数比例实例，因此通过调用它就像d3.scale.category10()(10)您每次都使用一个新实例一样。每个序数比例实例可以使用输入域显式配置（将输入值映射到输出颜色），也可以隐式配置，其中它只返回第一个输入值的第一个颜色，依此类推，将映射创建为你用吧。

在您的示例中，您每次调用都使用一个新实例，因此无论您输入什么值，您都会返回第一个颜色。除非您明确配置输入域，否则即使您之前的示例也可能导致一些意外行为。例如：

var a = d3.scale.category10()
a(0)  // => "#1f77b4"
a(10) // => "#ff7f0e"
var b = d3.scale.category10()
b(10) // => "#1f77b4"
b(0) // => "#ff7f0e"

以下是如何将输入域设置为在输入 N 时始终返回第 N 个颜色，无论调用顺序如何：

var a = d3.scale.category10().domain(d3.range(0,10));
a(0)  // => "#1f77b4"
a(1)  // => "#ff7f0e"
a(2)  // => "#2ca02c"
var b = d3.scale.category10().domain(d3.range(0,10));
b(2)  // => "#2ca02c"
b(1)  // => "#ff7f0e"
b(0)  // => "#1f77b4"

顺便说一句，即使现在a(10)返回相同，a(0)但那是因为 10 超出范围 [0,10]，从 0 开始到 9 结束，所以a(10)是未分配的输入并获得下一个颜色，恰好是首先。

于 2013-07-26T03:47:04.300 回答