使用D3 v5和TopoJson2的美国邮政编码的色度

时间:2018-11-25 03:17:00

标签: d3.js topojson

我正在尝试渲染类似于本区块文章http://bl.ocks.org/jefffriesen/6892860中的美国邮政编码地图。但是,我们正在使用d3 v5和topojson 2来渲染我们的叶绿体。我尝试使用上面列出的文章中的相同json文件,并按照本文https://medium.com/@mbostock/command-line-cartography-part-1-897aa8f8ca2c中的描述从美国人口普查shapefile创建自己的TopoJSON 当我的路径元素呈现时,它们都以负数开头。
例如

<path d="M-88.252618,32.92675L-88.249724,32.93242L-88.24927699999999,32.935445L-88.25165799999999,32.939561999999995L-88.244438,32.942834999999995L-88.241524,32.943475L-88.223208,32.943914L-88.220801,32.943674L-88.21701,32.942105999999995L-88.219386,32.944435999999996L-88.21664899999999,32.946624L-88.216779,32.947814L-88.213938,32.949691L-88.212525,32.947789L-88.209617,32.947812L-88.209345,32.945889L-88.207878,32.946484999999996L-88.206734,32.944995L-88.20436,32.946112L-88.203648,32.947345L-88.20190000000001,32.945577L-88.202092,32.938989L-88.200645,32.938452999999996L-88.198272,32.941612L-88.197619,32.944075999999995L-88.197609,32.953398L-88.197054,32.956958L-88.19703899999999,32.960555L-88.198129,32.966284L-88.19906499999999,32.969088L-88.19828199999999,32.968936L-88.196703,32.967236L-88.194583,32.967689L-88.19275999999999,32.96542L-88.18839799999999,32.961354L-88.189757,32.959086L-88.18948499999999,32.95597L-88.18731,32.951251L-88.18298999999999,32.945569L-88.181333,32.944722L-88.177638,32.943737L-88.17405099999999,32.943346999999996L-88.171933,32.941719L-88.17215,32.937964L-88.17489499999999,32.934253L-88.175275,32.933107L-88.17696,32.931939L-88.17799199999999,32.931709999999995L-88.18377799999999,32.931847999999995L-88.185707,32.932145999999996L-88.19130299999999,32.933794999999996L-88.197172,32.93636L-88.197093,32.935778L-88.19902499999999,32.935004L-88.20012899999999,32.929887L-88.200605,32.929224999999995L-88.20639299999999,32.92563L-88.20749699999999,32.924064L-88.207202,32.922716L-88.204803,32.918028L-88.2003,32.914769L-88.191058,32.911997L-88.19048599999999,32.911642L-88.189754,32.910731L-88.18319,32.893147L-88.182761,32.890824L-88.18301799999999,32.887755999999996L-88.183087,32.878425L-88.18166699999999,32.873931999999996L-88.179966,32.871674999999996L-88.173251,32.868770999999995L-88.17160299999999,32.867503L-88.166735,32.861618L-88.16566499999999,32.86069L-88.160356,32.861066L-88.15868999999999,32.860808999999996L-88.156962,32.860365L-88.15571399999999,32.858984L-88.154808,32.85582L-88.154973,32.852874L-88.158541,32.845793L-88.167082,32.83762L-88.171407,32.837187L-88.17805299999999,32.838135L-88.17909,32.837871L-88.18154,32.836090999999996L-88.181857,32.835262L-88.181795,32.834078999999996L-88.179732,32.830204L-88.178343,32.828534999999995L-88.18290499999999,32.826817L-88.183877,32.825393999999996L-88.183489,32.822454L-88.182699,32.821041L-88.182661,32.81944L-88.183483,32.817769L-88.18732899999999,32.815165L-88.188412,32.814828L-88.194653,32.815413L-88.196179,32.816097L-88.19623399999999,32.817411L-88.195144,32.818298L-88.19295,32.818764L-88.19120099999999,32.819854L-88.18997399999999,32.821951999999996L-88.189981,32.824044L-88.191406,32.826448L-88.192756,32.82716L-88.19525999999999,32.827464L-88.200411,32.829626999999995L-88.20471099999999,32.827861L-88.207366,32.827255L-88.21015299999999,32.829473L-88.211468,32.829682999999996L-88.215367,32.829326L-88.217457,32.830933L-88.21967,32.833683L-88.219207,32.834403L-88.216841,32.835541L-88.213628,32.838524L-88.21325499999999,32.840095999999996L-88.21547,32.842189999999995L-88.214934,32.847201999999996L-88.216079,32.848292L-88.217669,32.848816L-88.222061,32.847826999999995L-88.223996,32.848490999999996L-88.225645,32.850783L-88.22749499999999,32.851934L-88.229546,32.85181L-88.23008,32.854284L-88.230988,32.855423L-88.23395699999999,32.856491999999996L-88.236363,32.860262L-88.23566799999999,32.860873999999995L-88.23298,32.859994L-88.231612,32.860939L-88.230048,32.858373L-88.226203,32.857369999999996L-88.22416199999999,32.856403L-88.22027899999999,32.856775L-88.219279,32.859656L-88.22036899999999,32.861633999999995L-88.222899,32.86336L-88.224792,32.866174L-88.22616699999999,32.866673L-88.226458,32.869647L-88.227814,32.870878999999995L-88.223497,32.87269L-88.222126,32.875487L-88.222335,32.87699L-88.22402699999999,32.877916L-88.223743,32.880353L-88.224856,32.880925999999995L-88.221741,32.884943L-88.222796,32.886384L-88.224246,32.886776999999995L-88.22563,32.889120999999996L-88.22819,32.890071L-88.23069699999999,32.891719L-88.231425,32.893645L-88.22992599999999,32.894478L-88.23104599999999,32.899383L-88.232616,32.901367L-88.235406,32.901145L-88.23680999999999,32.903303L-88.241539,32.905958999999996L-88.242971,32.907424L-88.24347399999999,32.910334L-88.24654199999999,32.912438L-88.24688499999999,32.914113L-88.24930499999999,32.914018L-88.252084,32.919995L-88.25314999999999,32.924737ZM-88.34043199999999,32.991199L-88.330934,33.073125L-88.3195645760244,33.1645796939956L-88.31933040454409,33.1664633497658L-88.31749099999999,33.167985L-88.314467,33.16952L-88.309129,33.170139L-88.305533,33.171307L-88.30308199999999,33.173229L-88.30281,33.172199L-88.29787999999999,33.169976999999996L-88.295428,33.171946L-88.293249,33.172244L-88.288455,33.169379L-88.287148,33.167662L-88.284262,33.165577L-88.28080299999999,33.165599L-88.279795,33.165186999999996L-88.278516,33.163582999999996L-88.277917,33.160970999999996L-88.28068999999999,33.156985L-88.279803,33.154184L-88.276325,33.148539L-88.27718899999999,33.145505L-88.279219,33.143431L-88.281938,33.141683L-88.285871,33.139693L-88.291417,33.137355L-88.29141399999999,33.136499L-88.28872199999999,33.138081L-88.284223,33.14013L-88.27828199999999,33.143769999999996L-88.276073,33.146339999999995L-88.275933,33.147449L-88.27660399999999,33.152347L-88.275627,33.158054L-88.274236,33.161645L-88.272155,33.165895L-88.27213499999999,33.167476L-88.272984,33.169649L-88.274514,33.171507L-88.28216499999999,33.177462L-88.28224,33.178343999999996L-88.279626,33.179915L-88.27842799999999,33.180006999999996L-88.273988,33.179088L-88.271264,33.179271L-88.268594,33.180690999999996L-88.266768,33.182752L-88.266413,33.184377999999995L-88.267229,33.186669L-88.270333,33.188983L-88.270578,33.19084L-88.272784,33.190978L-88.271857,33.192352L-88.27278299999999,33.193658L-88.272183,33.196315L-88.27016599999999,33.198077999999995L-88.268231,33.198284L-88.26708599999999,33.19952L-88.265288,33.199565L-88.262044,33.203001L-88.258256,33.203502L-88.257874,33.20467L-88.256239,33.205472L-88.256509,33.208061L-88.25528299999999,33.208748L-88.256181,33.210969999999996L-88.253025,33.211503L-88.25224399999999,33.214335999999996L-88.24953,33.214279999999995L-88.24958699999999,33.216768L-88.248471,33.219738L-88.24547299999999,33.219991L-88.242612,33.220703L-88.239615,33.222217L-88.239398,33.223453L-88.236727,33.22334L-88.23539199999999,33.224831L-88.232286,33.225541L-88.23046,33.226894L-88.22748899999999,33.22827L-88.22806299999999,33.229780999999996L-88.229563,33.23104L-88.229264,33.233216999999996L-88.228065,33.23379L-88.22814799999999,33.235003999999996L-88.226539,33.236036L-88.224249,33.236036999999996L-88.22067899999999,33.237733L-88.21757199999999,33.237595999999996L-88.21757199999999,33.239337L-88.21552799999999,33.239109L-88.214083,33.240186L-88.21152099999999,33.239339L-88.20943799999999,33.237944999999996L-88.20328099999999,33.227525L-88.196902,33.215185999999996L-88.198813,33.213637999999996L-88.20055599999999,33.211255L-88.200665,33.209721L-88.199575,33.207934L-88.196822,33.208163L-88.193743,33.208965L-88.185683,33.193481L-88.183326,33.195883L-88.183447,33.192501L-88.18283799999999,33.191274L-88.184133,33.190421L-88.18181299999999,33.188932L-88.179999,33.188792L-88.179912,33.190216L-88.175011,33.189588L-88.160367,33.183603999999995L-88.16140299999999,33.181014999999995L-88.15974299999999,33.175837L-88.159825,33.173981999999995L-88.162223,33.170913L-88.161842,33.169239999999995L-88.15963599999999,33.167704L-88.16102699999999,33.163216L-88.164868,33.159459999999996L-88.165032,33.157053999999995L-88.166285,33.155473L-88.166286,33.152884L-88.167485,33.150022L-88.17042599999999,33.147822999999995L-88.172923,33.149350999999996L-88.167537,33.144813L-88.16432499999999,33.141542L-88.163117,33.140848L-88.161795,33.142185999999995L-88.161441,33.143813L-88.156048,33.148553L-88.154795,33.149996L-88.152642,33.151140999999996L-88.149237,33.151736L-88.149264,33.152858L-88.147211,33.155099L-88.145849,33.158363L-88.144882,33.159183999999996L-88.138329,33.159962L-88.138637,33.163753L-88.139263,33.165591L-88.14225499999999,33.168999L-88.142759,33.171661L-88.142281,33.1729L-88.139838,33.174498L-88.137481,33.178305L-88.137132,33.181773L-88.13852,33.185029L-88.141136,33.188232L-88.141776,33.189713999999995L-88.140942,33.191992L-88.13569,33.198485999999995L-88.13434,33.201127L-88.130403,33.200519L-88.129257,33.199061L-88.12123299999999,33.196242999999996L-88.11784899999999,33.192805L-88.114978,33.193422L-88.10863499999999,33.193959L-88.106437,33.193506L-88.106582,33.191728999999995L-88.105,33.188753L-88.105744,33.187523999999996L-88.10336,33.185879L-88.101479,33.190864999999995L-88.10139799999999,33.193565L-88.09245,33.193543L-88.08924499999999,33.194851L-88.090316,33.194231L-88.089525,33.191229L-88.088871,33.190244L-88.08521999999999,33.18965L-88.085737,33.188665L-88.083503,33.187635L-88.08243999999999,33.188345L-88.08053199999999,33.185963L-88.077772,33.186541L-88.07797699999999,33.190956L-88.076646,33.192448999999996L-88.071705,33.188437L-88.06892599999999,33.186904L-88.06486699999999,33.182390999999996L-88.061487,33.177189999999996L-88.061297,33.174121L-88.06034299999999,33.171303L-88.060114,33.167622L-88.05939699999999,33.166224L-88.06278499999999,33.162759L-88.056365,33.162275L-88.056378,33.159928L-88.053404,33.155794L-88.050298,33.152647L-88.048616,33.151682L-88.04751,33.148525L-88.04388999999999,33.144394L-88.038444,33.141413L-88.039947,33.140194L-88.040984,33.136479L-88.040187,33.135083L-88.041474,33.133021L-88.041094,33.131188L-88.038589,33.128873999999996L-88.04030499999999,33.128392999999996L-88.04542699999999,33.123965999999996L-88.047169,33.1233L-88.04746899999999,33.120712999999995L-88.049565,33.117323L-88.050981,33.116957L-88.054085,33.114573L-88.055364,33.109556999999995L-88.055256,33.103189L-88.057406,33.099958L-88.060183,33.097392L-88.060727,33.09485L-88.058849,33.092238L-88.05631799999999,33.090885L-88.050603,33.090817L-88.049786,33.090427999999996L-88.05112,33.087517999999996L-88.05269799999999,33.087036999999995L-88.05321599999999,33.085066999999995L-88.054576,33.084632L-88.05493,33.082364L-88.062028,33.079805L-88.03058899999999,33.065987L-88.02697099999999,33.063601999999996L-88.028976,33.06275L-88.02846,33.061147L-88.03148,33.061284L-88.030909,33.058420999999996L-88.029876,33.05755L-88.027591,33.057046L-88.02731899999999,33.055946L-88.02911499999999,33.053998L-88.032951,33.052968L-88.033005,33.054755L-88.033903,33.055763999999996L-88.036024,33.055948L-88.03577899999999,33.057848L-88.03871699999999,33.059018L-88.039587,33.058698L-88.039098,33.056222999999996L-88.039371,33.053635L-88.03725,33.049602L-88.034014,33.045981999999995L-88.03298,33.047356L-88.032029,33.04582L-88.031486,33.042429999999996L-88.03379799999999,33.042293L-88.033825,33.040895L-88.041468,33.041171999999996L-88.04179599999999,33.037529L-88.044978,33.037897L-88.04663699999999,33.036682L-88.046311,33.035925999999996L-88.042857,33.034115L-88.04302,33.033108L-88.04079,33.033108L-88.04133399999999,33.031894L-88.039322,33.030381L-88.03896999999999,33.029418L-88.036778,33.028559L-88.042875,33.027806999999996L-88.05258599999999,33.028523L-88.053716,33.027276L-88.052785,33.024060999999996L-88.053111,33.022663L-88.051453,33.019982999999996L-88.049196,33.018104L-88.052595,33.018378999999996L-88.06238499999999,33.018288L-88.063718,33.01728L-88.063881,33.014896L-88.066301,33.013751L-88.071603,33.013957999999995L-88.075409,33.012971L-88.07940699999999,33.013177999999996L-88.080434,33.01258L-88.088256,33.017888L-88.090853,33.018868999999995L-88.09099599999999,33.016450999999996L-88.092315,33.014809L-88.097465,33.012051L-88.102375,33.010022L-88.109624,33.007323L-88.11059399999999,33.006696999999996L-88.115988,33.000492L-88.116905,32.998596L-88.117423,32.989725L-88.120072,32.989998L-88.12105299999999,32.991372999999996L-88.12301,32.991921999999995L-88.12156999999999,32.993342999999996L-88.12146399999999,32.996046L-88.122063,32.997253L-88.124406,32.998261L-88.12612,32.999735L-88.127842,33.002426L-88.12915199999999,33.003461L-88.134785,33.005474L-88.13892899999999,33.007602L-88.143514,33.008978L-88.14900899999999,33.007996L-88.150877,33.004377999999996L-88.150666,33.002558L-88.154275,33.004540999999996L-88.155226,33.007084L-88.156748,33.009329L-88.156774,33.011046L-88.15505999999999,33.015788L-88.152367,33.016567L-88.14872299999999,33.019177L-88.145186,33.022337L-88.145213,33.024628L-88.146001,33.024628L-88.149456,33.022017999999996L-88.153644,33.020736L-88.15495,33.019591999999996L-88.158295,33.021150999999996L-88.158458,33.019180999999996L-88.159818,33.018859L-88.162292,33.019456L-88.16354299999999,33.019135999999996L-88.162864,33.015744999999995L-88.16474099999999,33.014874999999996L-88.167406,33.012538L-88.167569,33.011049L-88.17148499999999,33.009149L-88.169772,33.007292L-88.170507,33.004543999999996L-88.17222699999999,33.003225L-88.172527,33.000126L-88.171852,32.99586L-88.28878499999999,32.992919L-88.293836,32.992953L-88.329878,32.991544999999995L-88.33956099999999,32.991363Z"></path>

有人知道要遵循哪些步骤才能将美国人口普查形状文件中的邮政编码呈现为D3整体色。
http://www2.census.gov/geo/tiger/GENZ2017/shp/cb_2017_us_zcta510_500k.zip

function Initialize(){

var promises = [];

promises.push(d3.json("https://d3js.org/us-10m.v1.json"))
promises.push(d3.json(".\\data\\cb_2017_us_zcta510_500k.json"))
Promise.all(promises).then(function(values){
   drawTheMap(values[0], values[1]);
}); }

function drawTheMap(us,zip){

// allow zooming from 1x to 5x
var zooming = d3.zoom()
    .scaleExtent([1, 5])
    .on("zoom", function () {
          svg.attr("transform", d3.event.transform)
  })

var svg = d3.select("#map")
.append("svg")
.attr("width", 1200)
.attr("height", 800)
.call(zooming)
.append("g");

var path = d3.geoPath();

var countyFeatures = topojson.feature(us, us.objects.counties).features;
    var stateFeatures = topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })
    var zipFeature = topojson.feature(zip, zip.cb_2017_us_zcta510_500k).features;
    // var usFeature = topojson.feature(us, us.objects.land);

  svg.append("g")
  .attr("class", "states")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
  .attr("d", path);

  // TODO: Implement state borders being white to help differentiate
  // between two states

// svg.append("path")
  // .attr("class", "state-borders")
  // .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })))
    // .attr("fill", "none")
  // .attr("stroke", "white")
  // .attr("stroke-linejoin", "round")
  // .attr("d", path);

  var div = d3.select("body").append("div")
    .attr("class", "tooltip");

  svg.append("g")
    .selectAll("path")
    .data(zipFeature)
    .enter().append("path")
      .attr("d", path)
      .on("mouseover", d => {
          div
            .transition()
            .duration(200)
            .style('opacity', 0.9);
          div
            .html(d.id)
            .style('left', d3.event.pageX + 'px')
            .style('top', d3.event.pageY - 28 + 'px');
      })
      .on('mouseout', () => {
        div
          .transition()
          .duration(500)
          .style('opacity', 0);
      })         
      .on('click', function(d){
          GetZipCodeData(d.id)
      });

}

1 个答案:

答案 0 :(得分:0)

.data(topojson.feature(us, us.objects.states).features)

尝试使用县。