D3.js（TopoJSON）のマップが表示されない

Question

D3.jsライブラリを使用してTopoJSONファイルを表示しようとしていますが、マップが表示されません。 zip.topojsonファイルはmapshaper.orgで動作します。誰が私が何が間違っているのか理解するのを助けることができますか？

var margin = { top: 0, left: 0, right: 0, bottom: 0} 
var height = 400 - margin.top - margin.bottom 
var width = 800 - margin.left - margin.right 


var svg = d3.select("#map") 
    .append("svg") 
    .attr("height", height + margin.top + margin.bottom) 
    .attr("width", width + margin.left + margin.right) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


d3.queue() 
    .defer(d3.json, "zips.topojson") 
    .await(ready) 




// var projection = d3.geoMercator() 
// .translate([width/2, height/2]) // center it 

var projection = d3.geoMercator() 
    .scale(130) 

var path = d3.geoPath() 
    .projection(projection) 




function ready(error, data) { 
    console.log(data); 

    // every time you pull out topojson 
    var zips = topojson.feature(data, data.objects.zips).features 
    console.log(zips); 

    svg.selectAll(".zip") 
     .data(zips) 
     .enter().append("path") 
     .attr("class", "zip") 
     .attr("d", path) 

} 

マイzips.topojsonファイル（私はQGISを使用して取得した）：あなたのtopojsonに基づいて

{"type":"Topology","objects":{"zips":{"type":"GeometryCollection","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}},"geometries":[{"type":"Polygon","properties":{"id":null},"arcs":[[0]]},{"type":"Polygon","properties":{"id":null},"arcs":[[1,2,3]]},{"type":"Polygon","properties":{"id":null},"arcs":[[4]]},{"type":"Polygon","properties":{"id":null},"arcs":[[5,6,7,8]]},{"type":"Polygon","properties":{"id":null},"arcs":[[9,10]]},{"type":"Polygon","properties":{"id":null},"arcs":[[11]]},{"type":"Polygon","properties":{"id":null},"arcs":[[-3,12,13]]},{"type":"Polygon","properties":{"id":null},"arcs":[[14]]},{"type":"Polygon","properties":{"id":null},"arcs":[[-4,-14,15,-6,16]]},{"type":"MultiPolygon","properties":{"id":null},"arcs":[[[17]],[[-10,18]]]},{"type":"Polygon","properties":{"id":null},"arcs":[[19,-8]]}]}},"arcs":[[[4351,7522],[433,194],[59,-154],[22,-34],[80,17],[31,-21],[80,-212],[130,39],[128,11],[81,-17],[-79,-308],[-139,6],[23,-33],[-66,-109],[-130,-62],[-281,-36],[-63,59],[-29,-27],[-34,29],[-10,69],[90,93],[38,55],[-30,93],[-178,-66],[-92,243],[-14,27],[-50,144]],[[3369,6110],[249,160],[67,-31],[77,98],[46,-48],[25,54],[21,33],[176,-72],[88,114],[103,-60],[96,110],[21,-64],[128,112],[71,-27],[86,-292]],[[4623,6197],[-107,65],[-76,-100],[45,-33],[-74,-130],[-92,61],[-268,48],[-105,-192],[-54,-192],[-23,7]],[[3869,5731],[21,77],[-235,-13],[-222,171],[0,-15],[-64,159]],[[6048,8537],[74,264],[39,361],[44,23],[157,191],[189,-56],[75,-58],[231,-50],[221,137],[80,75],[115,179],[71,306],[113,90],[90,-48],[53,-64],[-61,-119],[134,-9],[249,-56],[172,-125],[132,194],[37,-27],[185,8],[104,-52],[51,-250],[-23,-58],[-68,0],[-251,-146],[-18,-206],[-139,-175],[-56,-23],[8,-146],[-86,-269],[13,-73],[59,-79],[4,-23],[-4,-108],[-47,-29],[-18,-48],[-28,2],[-8,-58],[203,-188],[78,44],[301,31],[73,-225],[-29,-44],[-109,-162],[-71,-19],[-42,-12],[-92,4],[-168,162],[-311,-56],[-28,-48],[59,-66],[65,56],[-32,-102],[-33,-288],[-75,-71],[-3,-8],[-408,329],[-402,279],[-31,-70],[-119,97],[-19,103],[79,164],[-134,-58],[-50,-115],[-61,2],[-148,117],[-78,29],[-125,121],[-76,117],[-123,318],[16,84]],[[2267,4325],[128,29],[258,-90]],[[2653,4264],[-103,-127],[-165,-125],[-432,-525],[-132,-21],[51,-37],[-48,-56],[18,-86],[138,-183]],[[1980,3104],[59,-183],[-88,-44],[-44,-94],[86,-131],[-270,-311],[163,-218],[-33,-169],[-138,-75],[35,-125],[-40,-8]],[[1710,1746],[-81,50],[-262,-188],[-523,588],[-25,68],[-111,55],[-9,81],[61,87],[-75,206],[12,121],[-128,59],[-257,-57],[-65,230],[-123,52],[-86,70],[-38,86],[11,12],[514,669],[70,-48],[134,-164],[14,108],[65,29],[-27,125],[15,73],[94,42],[12,79],[44,-54],[-50,143],[100,-108],[82,-29],[258,-167],[69,38],[172,2],[58,-69],[163,117],[115,12],[313,-54],[119,63],[-78,252]],[[4999,4329],[130,37],[272,-223],[74,32],[-30,-152],[-77,-100],[52,-19],[-27,-134],[94,34],[13,-42],[113,48],[12,-71],[99,-225],[-92,-35],[73,-106],[-27,-109],[69,-21],[312,65],[-50,-167],[64,-48],[-71,-133],[-16,-29]],[[5986,2931],[-13,8],[-63,-10],[-17,-2],[-10,-2],[-10,0],[-34,-2],[-17,-7],[-23,2],[-8,-2],[-99,-95],[88,-200],[-345,-296],[-96,41],[-17,50],[-17,15],[2,29],[-27,71],[-38,27],[-67,8],[-14,-22],[-185,-23],[-31,-17],[-13,60],[122,40],[33,73],[-96,102],[2,75],[111,102],[-287,19],[-54,-54],[-44,27],[-75,64],[-114,159],[-56,-50],[-92,33],[-88,79],[-21,104],[-153,52],[-40,138],[-4,-2],[-63,191],[-81,15],[69,50],[186,292],[191,108],[75,-38],[59,-123],[297,69],[46,94],[75,33],[61,40],[8,73]],[[720,7391],[268,406],[163,-108],[174,104],[180,-6],[281,75],[146,196],[67,29],[147,-29],[335,308],[-50,171],[92,70],[148,-47],[181,-238],[-21,-35],[-116,83],[-44,162],[-83,25],[-30,-31],[-19,-229],[-90,-142],[-111,-77],[3,-98],[-182,-33],[20,-106],[111,-38],[-69,-181],[-104,2],[-55,-91],[-75,-46],[-6,-119],[75,-54],[-84,0],[6,-83],[128,2],[122,-38],[-7,-133],[-73,50],[-17,-59],[128,-79],[90,-6],[-203,-229],[-82,-125],[-94,0],[-102,-90],[18,-64],[-108,-38],[12,-29],[-195,-39],[-75,-175],[-48,-119],[-32,-25],[-121,169],[-109,54],[-8,35],[-57,121],[-40,112],[-46,36],[-10,56],[-23,-4],[-138,250],[-203,354],[35,173]],[[4623,6197],[63,-56],[102,96],[38,-48],[115,48],[52,-52],[126,-190],[-63,-39],[77,14],[99,-166],[-44,-175],[-25,-119],[-400,-23],[50,-119],[-58,-35],[-42,-217],[-423,233],[-53,36],[-123,-148],[-86,-200],[-46,-46],[-33,-19]],[[3949,4972],[-19,-18],[-82,158],[-2,4],[-25,27],[-25,38],[-46,121],[21,29],[-70,62],[122,204],[29,73],[17,61]],[[5385,6139],[115,271],[4,339],[19,75],[-42,9],[94,106],[145,79],[92,17],[-63,-36],[-50,-125],[113,-77],[82,46],[117,-152],[-30,-37],[63,-59],[34,40],[121,-109],[193,-27],[25,209],[35,0],[2,89],[44,-54],[999,27],[103,-85],[-36,-100],[-61,-159],[-131,-345],[-9,-25],[0,-2],[-167,-30],[-134,77],[-94,-10],[-114,-52],[-98,-90],[-111,-18],[-69,-50],[-191,39],[-251,-31],[-46,-185],[27,-46],[-35,-31],[-65,-42],[-50,54],[-53,-148],[-94,29],[6,-110],[-125,264],[-111,169],[-96,188],[-139,39],[32,69]],[[3949,4972],[29,-45],[-50,-180],[56,-97],[50,-15],[-12,-90],[-147,-70],[-117,-109],[-15,-50],[136,-208],[-20,-94],[115,-158],[4,-23],[-145,208],[-88,0],[-62,-46],[-84,42],[61,63],[-239,102],[-73,-257],[-111,-62],[58,-90],[195,-210],[-109,-98],[-107,110],[-75,-14],[-13,60],[-73,-23],[-98,61],[60,250],[155,335],[-54,-75],[-195,-173],[-125,-131],[44,106],[-241,48],[52,63],[159,29],[-109,116],[-6,125],[-102,-108]],[[2267,4325],[-102,41],[-25,15],[153,239],[240,490],[155,235],[142,248],[91,69],[60,-60],[136,54],[143,479],[17,2],[79,-61],[13,34]],[[8967,4979],[295,233],[119,392],[430,518],[188,-62],[-36,-159],[-178,-154],[-52,-43],[-184,-357],[-92,-298],[-136,-29],[-92,-108],[-130,-56],[-124,2],[-8,121]],[[4999,4329],[23,121],[82,64],[-50,67],[31,-2],[67,-17],[139,169],[-28,29],[4,112],[70,-54],[54,98],[142,-129],[-37,-31],[106,-102],[57,21],[-86,58],[90,96],[86,-36],[-56,-283],[121,-83],[130,-125],[60,143],[11,36],[255,-100],[-21,-165],[-62,-60],[12,-206],[207,-82],[74,-123],[58,-152],[-109,-231],[-58,-64],[-52,-111],[-45,-225],[-50,-64],[-81,-48],[-157,81]],[[1980,3104],[91,-136],[77,-239],[142,-156],[128,179],[101,-88],[-44,-64],[4,-196],[176,140],[129,93],[126,-112],[32,208],[98,69],[8,60],[117,52],[15,44],[50,-54],[159,-121],[-77,-183],[27,-25],[59,-48],[-34,-100],[76,-54],[-103,-44],[197,-321],[-67,-50],[-86,-2],[-113,-125],[155,-206],[10,-440],[-716,-520],[30,-73],[119,-159],[-4,-56],[-78,-29],[3,-56],[-76,-96],[-42,-11],[-138,-185],[-21,23],[-477,456],[-71,548],[-95,617],[-157,102]]],"transform":{"scale":[0.000023837383738373528,0.000016953495349535314],"translate":[-71.191155,42.22788]}} 

Answer 1

、スクリプトが動作していることも可能です。機能は非常に小さく、見えなくなっています（ただし、検査時にDOMに表示されます）。あなたのデータがまだデータを投影する場合、スケールファクタに誤りがあるかもしれない見えるはずれ、CRS84に投影さ

var projection = d3.geoMercator() 
.scale(100000) 
.center([-71,42.3]) 

：機能を表示するには、にあなたの投影を変更することができます異常に小さいと思われるtopojsonで使用されます"transform":{"scale":[0.000023837383738373528,0.000016953495349535314]。

三つのソリューションが頭に浮かぶ：

1. は、（上記のパラメータなど）のニーズのために働く投影パラメータを検索します。
2. データをWGS84に再投影する（long long pairs）。
3. d3.geoTransformを使用してデータを拡大/縮小します。これは面倒な場合があります。