D3 和 Scales 中的 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 来在 leaflet 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]);

D3 和 Scales 中的 Colorbrewer

Colorbrewer in D3 & Scales

javascript

svg

colors

d3.js

leaflet

D3 和​​ Scales 中的 Colorbrewer

Colorbrewer in D3 & Scales

javascript

svg

colors

d3.js

leaflet

D3 和 Scales 中的 Colorbrewer