县等人跳过县

时间:2015-10-29 17:51:51

标签: javascript d3.js

我试图使用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);
};

我的结果:

enter image description here

正如您所看到的,当我使用网络检查器检查这些县时,有些县似乎根本没有上色,scales[s](rateById[d.id])返回undefined

它们中的每一个似乎都是FIPS代码所在的县,并且#34;跳过"两边一个。例如,亚利桑那州皮马县亚利桑那州最南端的县的FIPS代码为04019。没有0401804020,它从04017(纳瓦霍县,亚利桑那州)到04019(Pima County,AZ),然后是04020(Pimal)县,AZ)。这似乎是所有未充分使用JavaScript的县之间的共性,但我无法弄清楚如何解决这个问题。

0 个答案:

没有答案