3

数値を色にマッピングするために、D3 の序数スケールを使用しています。私はこれを使用しました：

color = d3.scale.ordinal().range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2"]).domain([0,6]);
console.log(color(0),color(1),color(2),color(3),color(4),color(5),color(6));

私が得ている応答は次のとおりです。

#1f77b4 #2ca02c #d62728 #9467bd #8c564b #e377c2 #ff7f0e

応答が次のようになるべきではないことに興味があります。

#1f77b4, #ff7f0e, #2ca02c, #d62728, #9467bd, #8c564b, #e377c2

お知らせ下さい。

4

2 に答える 2

17

ドメインが正しくありません:

> color.domain()
[0, 6, 1, 0.5]

序数スケールの範囲内の各値について、ドメイン内に一致する値が存在する必要があります。

ドメインを に設定する代わりに、次の[0,6]ようにする必要があります[0, 1, 2, 3, 4, 5, 6]。

color = d3.scale.ordinal()
          .range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2"])
          .domain(d3.range(0,7));

色を更新した後、すべてが機能することを確認します。

> d3.range(0,7).forEach(function(d){ console.log(color(d)); })
#1f77b4
#ff7f0e
#2ca02c
#d62728
#9467bd
#8c564b
#e377c2
于 2013-06-26T14:12:06.830 に答える
2

ドメインには明示的に定義された値が 2 つしかないため、これは予期されることです。したがって、最初の値 0 は の最初の色に割り当てられ#1f77b4、2 番目の値 6 は 2 番目の色 に割り当てられ#ff7f0e、残りは文字列として内部的に並べ替えられた後に推測されます。予測可能な動作のために、ドメインを明示的に定義する必要があります。例えば、

color = d3.scale.ordinal()
  .range(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2"])
  .domain([0,1,2,3,4,5,6]);

console.log(color(0),color(1),color(2),color(3),color(4),color(5),color(6));

ドキュメントに 記載されているように

序数スケールでのドメインの設定はオプションです。ドメインが設定されていない場合、スケール関数に渡される各一意の値には、出力範囲から新しい値が割り当てられます。つまり、ドメインは使用法から暗黙的に推測されます。ただし、使用法からのドメインの推測は順序に依存するため、順序スケールのドメインを割り当てて決定論的な動作を保証することをお勧めします。

于 2013-06-26T14:19:12.627 に答える