在 d3 中动态创建图例

我在用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" or "#fee090"？我如何访问这些值？ 我想制作一个当我更改输入颜色数量时动态变化的图例，即从8 to 3以及色阶中使用的颜色，即来自RdYlBu to YlGn.

我想我已经很接近了。 我有这个

var scale = d3.scale.ordinal()
    .domain()
    .range(colorScale.range());

我只需要填写domain具有相应的值，然后我可以使用它们轻松创建我的图例...... 但是，我不知道如何动态提取它们。 就像是colorScale.invertExtent("#fdae61")是静态的，因为每当我改变色阶时我都需要改变颜色等。

如果您想创建自动图例，我的建议是您根据您的情况创建一个数据集colorScale域和范围，并将此数据集绑定到您的图例。这样，只要您更改域或缩放范围，数​​据集就会发生变化。

例如，如果您有以下比例，域从 0 到 500：

var colorScale = d3.scale.quantize()
    .domain([0, 500])
    .range(["#d73027", "#f46d43", "#fdae61", "#fee090", "#e0f3f8",
           "#abd9e9", "#74add1", "#4575b4"]);//this is colorBrewer.RdYlBu[8]

您可以创建一个包含所有值范围的数组。这将是我们的数据集，名为colorRange:

var colorRange = [];    
for(var i = 0; i < colorScale.range().length; i++){
    colorRange.push(colorScale.invertExtent(colorScale.range()[i])[0]);
};

根据前面的代码，如果我们console.log这个数组，我们会得到：

console.log(colorRange);// returns [0, 62.5, 125, 187.5, 250, 312.5, 375, 437.5]

其中包含 8 种颜色对应的域值。例如，如果我们从中删除两种颜色colorScale范围，我们现在有：

console.log(colorRange);// returns [0, 83.333, 166.666, 250, 333.333, 416.666]

一旦你有了这个colorRange数组，您不仅拥有图例的域值，而且还可以使用以下方法轻松设置颜色：

colorScale(colorRange[i])

Where i从第一个值到最后一个值。

PS：如果您使用分位数刻度，我们可以放弃繁琐的 for 循环并简单地使用[0].concat(colorScale.quantiles())创建我们的数组。