D3和Scales中的彩色酿酒机

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所取的值。然后，我想通过在传单上覆盖一个leaflet map，在svg上显示这个点数据。我可以很容易地显示这些点，并选择如下颜色：

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

首先，您需要找到max和min 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]);

编辑

看来分位数可以更容易地做到这一点：

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