JavaScript/D3："same"函数调用会产生不同的结果？

Question

以下是我对D3:中category10函数的困惑（jsfiddle演示）

> 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)相同的值。

这里出了什么问题？

Answer 1

每次对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)是一个未分配的输入，并获得下一个颜色，恰好是第一个。