Javascript D3 choropleth地图及图例

我有一张显示美国总人口的乔洛佩斯地图。我想在地图上添加一个图例，显示分位数范围值。我已经看到了关于这个主题的其他类似问题，但似乎无法使其适用于我的具体案例。我知道我需要包括颜色范围或颜色域，但不确定这是否正确。到目前为止，图例中只显示了一个功能，可能是所有图例功能都堆叠在一起。我怎样才能确定，怎样才能解决这个问题

//Define default colorbrewer scheme
var colorSchemeSelect = "Greens";
var colorScheme = colorbrewer[colorSchemeSelect]; 

//define default number of quantiles
var quantiles = 5;

//Define quantile scale to sort data values into buckets of color
var color = d3.scale.quantile()
   .range(colorScheme[quantiles]);

d3.csv(data, function (data) {
    color.domain([
         d3.min(data, function (d) {
           return d.value;
         }),
         d3.max(data, function (d
           return d.value
         }) 
    ]);

//legend                            
var legend = svg.selectAll('rect')
    .data(color.domain().reverse())
    .enter()
    .append('rect')
    .attr("x", width - 780)
    .attr("y", function(d, i) {
       return i * 20;
    })
   .attr("width", 10)
   .attr("height", 10)
   .style("fill", color);

---

如果你有一个有序的尺度，你正在使用的图例代码将非常好地工作，其中域是由离散值组成的，这些离散值与颜色范围一一对应。但是你使用的是分位数，所以需要一种不同的方法

对于a，域是所有可能输入值的列表，范围是离散输出值的列表。域列表按升序排序，然后划分为大小相等的组，这些组分配给范围中的每个输出值。组的数量由输出值的数量决定

记住这一点，为了获得每种颜色的一个图例条目，您需要使用颜色刻度的范围，而不是域，作为图例的数据。然后，您可以使用该方法查找使用该颜色绘制的最小和最大输入值

示例代码，使每个图例条目成为一个包含彩色矩形和显示相应值的文本标签的

var legend = svg.selectAll('g.legendEntry')
    .data(color.range().reverse())
    .enter()
    .append('g').attr('class', 'legendEntry');

legend
    .append('rect')
    .attr("x", width - 780)
    .attr("y", function(d, i) {
       return i * 20;
    })
   .attr("width", 10)
   .attr("height", 10)
   .style("stroke", "black")
   .style("stroke-width", 1)
   .style("fill", function(d){return d;}); 
       //the data objects are the fill colors

legend
    .append('text')
    .attr("x", width - 765) //leave 5 pixel space after the <rect>
    .attr("y", function(d, i) {
       return i * 20;
    })
    .attr("dy", "0.8em") //place text one line *below* the x,y point
    .text(function(d,i) {
        var extent = color.invertExtent(d);
        //extent will be a two-element array, format it however you want:
        var format = d3.format("0.2f");
        return format(+extent[0]) + " - " + format(+extent[1]);
    });

var legend=svg.selectAll（'g.legendEntry'）
.data（color.range（）.reverse（））
.输入（）
.append（'g'）.attr（'class'，'legendEntry'）；
传奇
.append（'rect'）
.attr（“x”，宽度-780）
.attr（“y”，函数（d，i）{
返回i*20；
})
.attr（“宽度”，10）
.attr（“高度”，10）
.style（“笔划”、“黑色”）
.style（“笔划宽度”，1）
.style（“fill”，函数（d）{return d；}）；
//数据对象是填充颜色
传奇
.append（'文本'）
.attr（“x”，宽度-765）//在
.attr（“y”，函数（d，i）{
返回i*20；
})
.attr（“dy”，“0.8em”）//将文本放在x，y点*下方一行*处
.文本（功能（d，i）{
变量范围=颜色。反相器范围（d）；
//扩展数据块将是一个两元素数组，可根据需要对其进行格式化：
var格式=d3.格式（“0.2f”）；
返回格式（+区段[0]）+“-”+格式（+区段[1]）；
});

类似于？您只需要将输出颜色的范围设置为分位数（即5种颜色）。是的，我希望它与该示例类似。我不想像示例中使用的那样为图例使用硬编码值的变量。我想让它使用color.domain和colorScheme变量来填充图例值。顺便说一句，看看代码的其余部分，看起来您真正想要使用的是一个（而不是分位数），对于这个分位数，域是一个

[min，max]

范围，刻度将它分成表示域变量大小相等的组（而不是相同数量的观察）。上面的图例代码适用于任何一种刻度类型，因为在这两种情况下，组的数量由范围数组决定，并且可以使用

invertExtent

访问相应的域值。非常感谢您深思熟虑的回答！我希望我能投票支持您的答案，但我没有足够的声誉来支持这一点t还没有。我只是对示例代码中的.invertExtent（）方法有问题。它在控制台中给了我一个错误，并且没有显示与图例关联的文本。您使用的是最新版本的d3吗？它。最新版本：；和。我必须进行一些整理更改（对于格式化功能和文本对齐，我将更新上面的示例代码），但这两个问题都没有导致错误。（为添加了

invertExtent

方法，最新版本为is 3.4.2。）我没有使用最新版本，所以解决了我的问题！谢谢！你听说过最新版本的D3导致地图投影问题吗？