在d3中动态创建图例 [英] Dynamically create legend in 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

That gives me 8 different colors, corresponding to certain ranges of given values. I then use coloScale to fill the svg

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

如何知道哪个范围的值对应于＃fdae61或＃fee090？我将如何访问这些值？
当我改变输入颜色的数量，即从 8 到 3 以及颜色中使用的颜色，即从 RdYlBu 到 YlGn 。

How do I know which range of values corresponds to the color "#fdae61" or "#fee090"? How would I access these values? I want to make a legend that changes dynamically when I change the number of input colors, i.e. from 8 to 3 as well as the color used in the colorscale, i.e. from RdYlBu to YlGn.

我想我很近。
我有这个

I think I am very close. I have this

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

我只需要填写 domain 相应的值，然后我可以使用它来轻松创建我的图例...
然而，我不知道如何动态提取它们。
像 colorScale.invertExtent（＃fdae61）是静态的，因为每当我改变颜色时，我需要改变颜色等。

I only need to fill the domain with the corresponding values which I then can use to easily create my legend... However, I do not know how to extract them dynamically. Something like colorScale.invertExtent("#fdae61") is to static since I would need to change the colors etc. whenever I change my colorscale.

推荐答案

如果你想创建一个自动图例，我的建议是你创建一个基于你的 colorScale 域和范围，并将此数据集绑定到您的图例。这样，只要您更改域或范围，数据集就会更改。

If you want to create an automatic legend, my suggestion is that you create a dataset based on your colorScale domain and range, and bind this dataset to your legend. This way, the dataset changes whenever you change the domain or the range of you scale.

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

For instance, if you have this scale, with the domain going from 0 to 500:

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

你可以创建一个数组，值范围。这将是我们的数据集，命名为 colorRange ：

You could create an array that has all the ranges of values. This will be our dataset, named colorRange:

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

根据上面的代码，如果我们使用console.log这个数组，

Based on the previous code, if we console.log this array, we get:

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

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

Which contains the corresponding domain values for your 8 colors. If we for instance remove two colors from colorScale range, we have now:

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

$ b b

一旦你有这个 colorRange 数组，你不仅有你的图例的域值，但你可以很容易地设置颜色，使用：

Once you have this colorRange array, you not only have the domain values for your legend, but you can easily set the colors as well, using:

colorScale(colorRange[i])

其中 i 从第一个值到最后一个。

Where i goes from the first value to the last.

正在使用分位数标度，我们可以删除繁琐的for循环，只需使用 [0] .concat（colorScale.quantiles（））创建数组。

PS: If you were using a quantile scale instead, we could drop the cumbersome for loop and simply use [0].concat(colorScale.quantiles()) to create our array.

这篇关于在d3中动态创建图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！