我试图使用d3制作一个等值区域地图并使用此处的示例进行自然休息:http://bl.ocks.org/tmcw/4969184
我的json
文件如下:
{
"type": "Topology",
"objects": {
"counties": {
"type": "GeometryCollection",
"bbox": [-179.1473399999999, 17.674395666000066, 179.77848000000006, 71.38921046500008],
"geometries": [
{
"type": "Polygon",
"properties": {
"fips": "01001",
"name": "Autauga County",
"state": "AL"
},
"id": "01001",
"arcs": [[0,1,2,3,4]]
}, …
我的csv
是:
fips,value
01001,0.097
01003,0.091
01005,0.134
01007,0.121
01009,0.099
01011,0.164
…
这是我的d3
代码:
var scales = {};
var rateById = d3.map();
var projection = d3.geo.albersUsa()
.scale(1200);
var path = d3.geo.path()
.projection(projection);
// Draw here!
queue()
.defer(d3.json, "data/us-10m.json")
.defer(d3.csv, "data/data.csv")
.await(ready);
function ready(error, us, data) {
var rateById = {};
data.forEach(function(d) { rateById[d.fips] = +d.value; });
// jenks
var jenksDomain = ss.jenks(data.map(function(d) { return +d.value; }), 9);
scales.jenks9 = d3.scale.threshold()
.domain(jenksDomain)
.range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
//create map svg
svg = d3.select("#graphic").append("svg");
//draw counties
var counties = svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.enter().append("path")
.attr("d", path);
//style each county
function setScale(s) {
counties.attr("class", function(d) {
return d.properties.state + " " +
d.properties.name + " " +
scales[s](rateById[d.id]); })
}
setScale('jenks9');
// draw state outlines
chartElement.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("class", "states")
.attr("d", path);
};
我的结果:
正如您所看到的,当我使用网络检查器检查这些县时,有些县似乎根本没有上色,scales[s](rateById[d.id])
返回undefined
。
它们中的每一个似乎都是FIPS代码所在的县,并且#34;跳过"两边一个。例如,亚利桑那州皮马县亚利桑那州最南端的县的FIPS代码为04019
。没有04018
或04020
,它从04017
(纳瓦霍县,亚利桑那州)到04019
(Pima County,AZ),然后是04020
(Pimal)县,AZ)。这似乎是所有未充分使用JavaScript的县之间的共性,但我无法弄清楚如何解决这个问题。