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 に答える