javascript - D3 和​​音阶中的 Colorbrewer

Question

我有一个 geoJSON 看起来像这样

{"type":"FeatureCollection",
"crs":{"type":"name",
"properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}},
"features":[{"type":"Feature",
"properties":{"scalerank":10,"natscale":1,"labelrank":8,"featurecla":"Admin-1 capital","name":"Colonia del Sacramento","namepar":null,"namealt":null,"diffascii":0,"nameascii":"Colonia del Sacramento","adm0cap":0,"capalt":0,"capin":null,"worldcity":0,"megacity":0,"sov0name":"Uruguay","sov_a3":"URY","adm0name":"Uruguay","adm0_a3":"URY","adm1name":"Colonia","iso_a2":"UY","note":null,"latitude":-34.479999,"longitude":-57.840002,"changed":4,"namediff":1,"diffnote":"Added missing admin-1 capital. Population from GeoNames.","pop_max":21714,"pop_min":21714,"pop_other":0,"rank_max":7,"rank_min":7,"geonameid":3443013,"meganame":null,"ls_name":null,"ls_match":0,"checkme":0},
"geometry":{"type":"Point","coordinates":[-57.8400024734013,-34.4799990054175]
}}]
}

我想设置为使用 colorbrewer 来选择颜色，具体取决于 pop_max 所采用的值。然后我想通过在传单顶部覆盖 svg 来在传单 map 上显示该点数据。我可以轻松显示点并选择颜色，如下所示:

var feature = g.selectAll("path")
.data(collection.features)
.enter()
.append("path")
.style("fill", function(d) {
    if(d.properties.pop_max) < 1000 {
        return("red")
    } else if {....
    };
});

但是，不方便。

所以我尝试了:

var colorScale = d3.scale.quantize()
.range(colorbrewer.Greens[7])
.domain(0,30000000);

var feature = g.selectAll("path")
.data(collection.features)
.enter()
.append("path")
.style("fill", function(d) {
    colorScale(d.properties.pop_max);
});

根本不显示任何点...请注意，我估计了我的域名。 0 不一定是最低数字，30000000 不一定是最高数字。有什么想法吗？

Answer 1

首先，您需要找到最大值和最小值pop_max，类似这样的东西应该可以工作:

var extent = d3.extent(geojson.features, function(d) { return d.properties.pop_max; });

其次，由于您希望颜色代表 7 个值范围，因此您应该使用 d3.scale.threshold :

var N = 7,
    step = (extent[1] - extent[0]) / (N + 1),
    domain = d3.range(extent[0], extent[1] + step, step);
var colorScale = d3.scale.threshold()
    .domain(domain)
    .range(colorbrewer.Greens[N]);

编辑

看起来像quantile可以更轻松地做到这一点:

d3.scale.quantile()
 .domain([extent[0], extent[1]])
 .range(colorbrewer.Greens[N]);