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结束，所以{ {1}}是一个未分配的输入，并获得下一个颜色，恰好是第一个颜色。

JavaScript / D3：＆＃34;相同＆＃34;函数调用产生不同的结果？

1 个答案: