量子化されたカラースケールからの戻りしきい値d3

Question

d3.scale.quantize()とcolorBrewerを使用してカラースケールを取得しています。与えられた値の特定の範囲に対応し、私8異なる色を与える

.... 
var extent = d3.extent(collection.features, function(d) { 
     return d.properties.mean; 
    }); 

var colorScale = d3.scale.quantize() 
    .domain(extent) 
    .range(colorbrewer.RdYlBu[8]); 
... 

。 私はその後、私は値の範囲は色"#fdae61"または"#fee090"に対応しているかを知るにはどうすればよいsvg

.... 
.attr("fill-opacity", 0.1) 
.attr("stroke", "grey") 
.style("fill", function(d) { 
    return colorScale(d.properties.mean); 
}); 
... 

を埋めるためにcoloScaleを使うのか？これらの値にはどうすればアクセスできますか？私はあなたが必要なもの

Answer 1

...伝説を作るためにそれらを必要 はquantize.invertExtent(value)です：

は、ドメイン内の値の範囲を返し範囲内の対応する値の[X0、X1]：逆量子化する。このメソッドは、マウスの下のピクセル位置に対応するドメイン内の値を決定するなど、対話に役立ちます。

console.log(colorScale.invertExtent("#fdae61"));//returns [25, 37.5] 

がチェック：これは、例えば、カラー＃fdae61にドメイン範囲を取得します

var colorScale = d3.scale.quantize() 
    .domain([0, 100]) 
    .range(["#d73027", "#f46d43", "#fdae61", "#fee090", "#e0f3f8", "#abd9e9", "#74add1", "#4575b4"]); 

：

だから、我々は0から100まで行くのドメインを持っていると仮定スニペット：

var colorScale = d3.scale.quantize() 
 
    .domain([0, 100]) 
 
    .range(["#d73027", "#f46d43", "#fdae61", "#fee090", "#e0f3f8", "#abd9e9", "#74add1", "#4575b4"]); 
 
\t \t 
 
\t \t 
 
console.log(colorScale.invertExtent("#fdae61")); 
 
console.log(colorScale.invertExtent("#fee090"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>