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

首先你需要找到最大值和分钟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]);

<强> EDITS

看起来quantile可以更轻松地完成这项工作：

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

D3＆amp;中的Colorbrewer秤

1 个答案: