JavaScript/D3 : The "same" function call yields different result?

Question

这是我对 jsfiddle-demo 的困惑( category10 )在 D3 中发挥作用:

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