量化彩色标度d3的返回阈值

Question

我正在使用d3.scale.quantize()和colorBrewer来获得一个色标。

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

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

这给了我8不同的颜色，对应于给定值的某些范围。然后我使用coloScale来填充svg

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

我如何知道哪个范围的值对应于颜色"#fdae61"或"#fee090"？我将如何访问这些值？我需要他们创造一个传奇..。

Answer 1

你需要的是quantize.invertExtent(value)

返回域x0中值的范围，对应范围内的值的x1 :量化的逆值。这种方法对于交互很有用，比如确定与鼠标下的像素位置相对应的域中的值。

因此，假设我们有一个从0到100的域：

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

例如，这将获得颜色# for 61的域范围：

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

检查代码片段：

​

var colorScale = d3.scale.quantize()
    .domain([0, 100])
    .range(["#d73027", "#f46d43", "#fdae61", "#fee090", "#e0f3f8", "#abd9e9", "#74add1", "#4575b4"]);
		
		
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>

​