帶有傳奇色彩的D3等位地圖

Question

我有顯示總人口的美國等值線地圖。我想在地圖上添加一個顯示分位數範圍值的圖例。我已經看到關於此主題的其他類似問題，但似乎無法使其適用於我的具體情況。我知道我需要包含顏色範圍或顏色域，但不確定這是否是正確的方法。截至目前，只有一個功能出現在圖例中，可能是所有圖例功能都堆疊在一起。我怎麼知道確切的，我該如何解決這個問題。

//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); 

Answer 1

，如果你有一個順序量表，其中域是由那些關聯到顏色的範圍在一對一的離散值，您使用得很好會工作傳奇代碼一個基礎。但是你使用分位數，所以需要一個不同的方法。

對於d3 quantile scale，域是所有可能的輸入值的列表，範圍是離散輸出值的列表。域列表按升序排序，然後劃分爲相同大小的組，分配給範圍中的每個輸出值。組的數量由輸出值的數量決定。因此，爲了獲得每種顏色的一個圖例條目，您需要使用顏色比例的範圍，而不是域作爲圖例的數據。然後，您可以使用quantileScale.invertExtent()方法查找使用該顏色繪製的最小和最大輸入值。

示例代碼，使每個圖例條目<g>包含彩色矩形和顯示相應值的文本標籤。

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]); 
    });