d3.js - d3.jsは量子化スケールの上限と下限を見つけます

Question

私は自分の値に色を付けたd3でマップを作成したので、次のようになりました。

var color= d3.scale.quantize().range(["#FAE3C3", "#EBAD95","#DB7768", "#CC403A", "#BC0A0C"]);

マップ キーを作成できるように、スケールの実際の制限を見つけるにはどうすればよいですか? （新しいデータをフィードした場合は更新したいと思います）。

Answer 1

次のように、ビンの下限と上限を取得できます。

var bounds = color.invertExtent('#FAE3C3')

凡例の可能な解決策は、色配列を反復処理してcolor.invertExtent各色を呼び出すことです。

より整然としたブレークポイントが必要な場合は、自分で定義してドメインとして設定する必要があると思います。たとえば、最小値が 2 で最大値が 59 の場合、次のようにできます。

color= d3.scale.quantize()
    .domain([0, 60])
    .range(["#FAE3C3", "#EBAD95","#DB7768", "#CC403A", "#BC0A0C"]);

つまりmaximum - minumum、色の数で割り切れます。