我有一张显示总人口的美国等值地图。我想在地图上添加一个图例来显示分位数范围值。我已经看到了关于这个主题的其他类似问题,但似乎无法让它适用于我的特定情况。我知道我需要包含颜色范围或颜色域,但不确定这是否正确。截至目前,图例中只显示了一个功能,可能是所有图例功能都叠加在一起。我怎么知道,我该如何解决这个问题。
//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);
答案 0 :(得分:8)
如果你有一个序数比例,那么你正在使用的图例代码将非常有效,其中域由离散值组成,这些离散值与一对一的颜色范围相关联。一个基础。但是你使用分位数比例,因此需要采用不同的方法。
对于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]);
});