我有显示总人口的美国等值线地图。我想在地图上添加一个显示分位数范围值的图例。我已经看到关于此主题的其他类似问题,但似乎无法使其适用于我的具体情况。我知道我需要包含颜色范围或颜色域,但不确定这是否是正确的方法。截至目前,只有一个功能出现在图例中,可能是所有图例功能都堆叠在一起。我怎么知道确切的,我该如何解决这个问题。带有传奇色彩的D3等位地图
//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);
类似[this](http://bl.ocks.org/KoGor/5685876)?您只需要将输出颜色的范围设置为分位数(即5种颜色)。 –
是的,我希望它与该示例类似。我不想为像图例这样的图例使用硬编码值的变量。我希望它使用color.domain和colorScheme变量来填充图例值。 – bailey