為什么這個geojson不能用D3渲染？

我正試圖從美國縣級相關資料中創建一個可視化。當我在在線驗證器和工具中使用json資料集時，各縣的資料呈現良好。但是當我試圖渲染一個基本的地圖時，螢屏上出現了空白。svg路徑被添加到svg中，它們的d屬性值在我看來是合適的，下面是一個路徑例子（對應于下面列出的json中特征陣列的第一個物件）：

但是，從視覺上看，什么都沒有。我檢查了添加填充和描邊值，沒有結果。我還試著將路徑放大，看看它們是否渲染得太小了，尺寸增加了，瀏覽器的開發工具也顯示了一個大尺寸，但從視覺上看，我們仍然有一個空白區域。

以下是我用來嘗試制作地圖的代碼：

{}。
"type": "FeatureCollection",
"features": []。
{ "type"。  "特征", "屬性"。  { "GEO_ID"。  "0500000US01029", "STATE"/span>。  "01", " COUNTY"。  "029", "name":  "Cleburne",/span> "LSAD"。  "County", "CENSUSAREA"： 560. 100000 }, "geometry"/span>。  { "type"。  "Polygon", "坐標"。  [ [  -85. 388717, 33. 913044 ], [/span> -85. 380885, 33. 873508 ], [/span> -85. 379455, 33. 866291 ], [/span> -85. 377426, 33. 856047 ], [/span> -85. 376403, 33. 850656 ], [/span> -85. 364595, 33. 788446 ], [/span> -85. 361844, 33. 773951 ], [/span> -85. 360491, 33. 767958 ], [/span> -85. 357402, 33. 750104 ], [/span> -85. 355252, 33. 739245 ], [/span> -85. 344054, 33. 682684 ], [/span> -85. 342722, 33. 675953 ], [/span> -85. 323792, 33. 580339 ], [/span> -85. 315340, 33. 537646 ], [/span> -85. 314994, 33. 535898 ], [/span> -85. 314843, 33. 534951 ], [/span> -85. 314091, 33. 530218 ], [/span> -85. 313999, 33. 529807 ], [/span> -85. 304439, 33. 482884 ], [/span> -85. 308211, 33. 481579 ], [/span> -85. 309250, 33. 483137 ], [/span> -85. 314852, 33. 487603 ], [/span> -85. 316028, 33. 488267 ], [/span> -85. 320893, 33. 488359 ], [/span> -85. 324856, 33. 489161 ], [/span> -85. 331061, 33. 491014 ], [/span> -85. 338280, 33. 494700 ], [/span> -85. 342544, 33. 495961 ], [/span> -85. 344923, 33. 497608 ], [/span> -85. 346705, 33. 501148 ], [/span> -85. 349958, 33. 501216 ], [/span> -85. 351594, 33. 499600 ], [/span> -85. 354491, 33. 498866 ], [/span> -85. 352576, 33. 494538 ], [/span> -85. 352573, 33. 492438 ], [/span> -85. 355315,33.492480
   ], [ -85.497455,  33. 494624 ], [/span> -85. 501645, 33. 494456 ], [/span> -85. 517310, 33. 494524 ], [/span> -85. 525130, 33. 494781 ], [/span> -85. 527515, 33. 494608 ], [/span> -85. 539922, 33. 494743 ], [/span> -85. 563763, 33. 495081 ], [/span> -85. 565653, 33. 494992 ], [/span> -85. 623387, 33. 495371 ], [/span> -85. 623645, 33. 495373 ], [/span> -85. 627835, 33. 495624 ], [/span> -85. 643482, 33. 495885 ], [/span> -85. 667220, 33. 496293 ], [/span> -85. 680346, 33. 496623 ], [/span> -85. 740983, 33. 498376 ], [/span> -85. 765427, 33. 498593 ], [/span> -85. 765308, 33. 496862 ], [/span> -85. 765631, 33. 483477 ], [/span> -85. 781244, 33. 483625 ], [/span> -85. 782689, 33. 483638 ], [/span> -85. 782735, 33. 469349 ], [/span> -85. 887782, 33. 469427 ], [/span> -85. 887675, 33. 476768 ], [/span> -85. 870053, 33. 476757 ], [/span> -85. 869308, 33. 491574 ], [/span> -85. 852421, 33. 491644 ], [/span> -85. 851890, 33. 498742 ], [/span> -85. 849839, 33. 499690 ], [/span> -85. 796852, 33. 541849 ], [/span> -85. 796054, 33. 556220 ], [/span> -85. 744118, 33. 556075 ], [/span> -85. 742348, 33. 586553 ], [/span> -85. 742202, 33. 600002 ], [/span> -85. 737379, 33. 599823 ], [/span> -85. 724517, 33. 599430 ], [/span> -85. 724953, 33. 613539 ], [/span> -85. 723670, 33. 613492 ], [/span> -85. 723650, 33. 613491 ], [/span> -85. 723074, 33. 613505 ], [/span> -85. 689954, 33. 612909 ], [/span> -85. 690140, 33. 615815 ], [/span> -85. 690716, 33. 625105 ], [ -85.690684, 33.627789 ], [/span> 85. 674932, 33. 627254 ], [/span> -85. 655810, 33. 627166 ], [/span> -85. 655549, 33. 638127 ], [/span> -85. 651295, 33. 637972 ], [/span> -85. 651283, 33. 641570 ], [/span> -85. 647190, 33. 641529 ], [/span> -85. 647040, 33. 648772 ], [/span> -85. 638579, 33. 648413 ], [/span> -85. 638586, 33. 649158 ], [/span> -85. 638049, 33. 773339 ], [/span> -85. 621245, 33. 773508 ], [/span> -85. 621019, 33. 782331 ], [/span> -85. 620890, 33. 787944 ], [/span> -85. 603469, 33. 787755 ], [/span> -85. 603465, 33. 788474 ], [/span> -85. 603391, 33. 802344 ], [/span> -85. 585985, 33. 802095 ], [/span> -85. 585201, 33. 845920 ], [/span> -85. 636882, 33. 846495 ], [_span> -85. 637126, 33. 846497 ], [/span> -85. 637012, 33. 875273 ], [/span> -85. 637014, 33. 875944 ], [/span> -85. 601899, 33. 874865 ], [/span> -85. 601913, 33. 875101 ], [/span> -85. 601858, 33. 889750 ], [/span> -85. 597063, 33. 889703 ], [/span> -85. 532482, 33. 889152 ], [/span> -85. 531812, 33. 903049 ], [/span> -85. 530094, 33. 941423 ], [/span> -85. 495820, 33. 942394 ], [/span> -85. 495289, 33. 956910 ], [/span> -85. 425627, 33. 957069 ], [/span> -85. 425444, 33. 960645 ], [/span> -85. 407831, 33. 960548 ], [/span> -85. 407637, 33. 964204 ], [/span> -85. 398837, 33. 964129 ], [_span> -85. 391495, 33. 927068 ], [/span> -85. 388717, 33. 913044 ] ] ] } 
, 
{ "type"。  "特征", "屬性"。  { "GEO_ID"。  "0500000US01031", "STATE"。  "01", " COUNTY"。  "031", "name":  "咖啡", "LSAD"。  "County", "CENSUSAREA"： 678。 972000 }, "geometry"/span>。  { "type"。  "Polygon", "坐標"。  [ [  -86. 030441, 31. 618939 ], [/span> -86. 004085, 31. 619067 ], [/span> -85. 999948, 31. 619311 ], [/span> -85. 980098, 31. 619189 ], [/span> -85. 926702, 31. 618966 ], [/span> -85. 904460, 31. 618775 ], [/span> -85. 899202, 31. 618729 ], [/span> -85. 878888, 31. 618547 ], [/span> -85. 832214, 31. 618240 ], [/span> -85. 789142, 31. 617964 ], [/span> -85. 789141, 31. 587866 ], [/span> -85. 789140, 31. 540617 ], [/span> -85. 789308, 31. 490925 ], [/span> -85. 789370, 31. 487561 ], [/span> -85. 789372, 31. 487430 ], [/span> -85. 790294, 31. 431467 ], [/span> -85. 789837, 31. 385469 ], [/span> -85. 789815, 31. 383145 ], [/span> -85. 789594, 31. 372698 ], [/span> -85. 789754, 31. 358887 ], [/span> -85. 789785, 31. 356562 ], [/span> -85. 789866, 31. 350574 ], [/span> -85. 790001, 31. 342857 ], [/span> -85. 789975, 31. 341524 ], [/span> -85. 790064, 31. 337277 ], [/span> -85. 790065, 31. 336908 ], [/span> -85. 790100, 31. 336276 ], [/span> -85. 790116, 31. 330082 ], [/span> -85. 790327, 31. 323452 ], [/span> -85. 790434, 31. 320267 ], [/span> -85. 790525, 31. 317495 ], [/span> -85. 791089, 31. 297603 ], [/span> -85. 791167, 31. 295340 ], [_span> -85. 791243, 31. 294184 ], [/span> -85. 791245, 31. 294004 ], [/span> -85. 791214,31.293551
   ],[ -85.791218, 31. 293252 ], [/span> -85. 791361, 31. 291777 ], [/span> -85. 791312, 31. 269325 ], [/span> -85. 791291, 31. 209854 ], [/span> -85. 791402, 31. 196349 ], [/span> -85. 847766, 31. 196369 ], [/span> -85. 857352, 31. 196367 ], [/span> -85. 857999, 31. 196374 ], [/span> -85. 865347, 31. 196374 ], [/span> -85. 882227, 31. 196339 ], [_span> -85. 938287, 31. 196344 ], [/span> -85. 949386, 31. 196123 ], [/span> -85. 950142, 31. 196242 ], [/span> -85. 960322, 31. 195962 ], [/span> -85. 966110, 31. 195935 ], [/span> -85. 999042, 31. 195777 ], [/span> -86. 013060, 31. 195318 ], [/span> -86. 058535, 31. 194082 ], [/span> -86. 116734, 31. 193015 ], [/span> -86. 116735, 31. 183885 ], [/span> -86. 116736, 31. 182099 ], [/span> -86. 125405, 31. 182057 ], [/span> -86. 125482, 31. 192754 ], [/span> -86. 141674, 31. 192693 ], [/span> -86. 193476, 31. 192213 ], [/span> -86. 194003, 31. 211362 ], [/span> -86. 193542, 31. 213028 ], [/span> -86. 193846, 31. 219589 ], [/span> -86. 193714, 31. 243119 ], [/span> -86. 193336, 31. 250169 ], [/span> -86. 193546, 31. 262915 ], [/span> -86. 193888, 31. 283526 ], [/span> -86. 194631, 31. 327933 ], [/span> -86. 194779, 31. 336812 ], [/span> -86. 195044, 31. 352681 ], [/span> -86. 195056, 31. 353359 ], [/span> -86. 196091, 31. 410348 ], [/span> -86. 196365, 31. 425431 ], [/span> -86. 193951, 31. 440072 ], [/span> -86. 193973, 31. 446586 ], [/span> -86. 194724, 31. 524460 ], [/span> -86. 194784, 31. 529949 ], [/span> -86. 182098, 31. 530047 ], [/span> -86. 156561, 31. 530203 ], [/span> -86. 156768, 31. 537527 ], [/span> -86. 150314, 31. 537601 ], [/span> -86. 143950, 31. 537675 ], [/span> -86. 144761, 31. 570994 ], [/span> -86. 145895, 31. 617741 ], [/span> -86. 124952, 31. 618044 ], [/span> -86. 123834, 31. 618167 ], [/span> -86. 094925, 31. 618405 ], [/span> -86. 058021, 31. 618793 ], [/span> -86. 030441, 31. 618939 ] ] ] } }
]
}

./maps.html

<html> 
<div id="map-tainer"> </div>>
<script src="https://d3js. org/d3.v7.min.js"></script>
<script src="https://unpkg. com/topojson@3">< /script>
<script src="map. js"></script>>
</html> 

./map.js

let h = 500;
let w = 960;
path = d3.geoPath（）。

d3.select("#map-container"/span>)
  .append("svg")
  .attr("id"/span>, "map")
  .attr("height", h)
  .attr("width", w)
  .attr("fill"/span>, "blue")
  .append("title")
  .text("Southeastern Region Counties")
  .attr("id", "title") 。

let maplink = "./corrected.json"/span>;
Promise.all([d3.json(maplink)] )。 then(([data]) =>  {


  let paths = d3.select("#map"/span>)。 selectAll("path").data(data.features) 。
paths.enter().append("path").attr('d', path) 。
});

我沒有看到任何錯誤資訊，也沒有在檔案中找到我的錯誤。我錯過了什么呢？

uj5u.com熱心網友回復：

你的坐標是未投影的，是一個緯度經度對的集合，但是你把這些坐標當成了像素坐標。這顯示在你的結果路徑資料上。M-85.388717,33.913044，一個代表-85°E，34°N的坐標。X值，即這里的經度，是負的，這意味著你的地圖被渲染在SVG之外--在它的左邊，因此它不可見。

你需要通過一個地理投影來運行你的緯度和經度對，該投影將三維球體上的這些點投影到你的SVG的二維平面。在這樣做的時候，你會引入一定程度的失真，所以你可能想嘗試一些投影（盡管如果放大到足夠大，比如說在一個城市，這通常是最小的）。

如果你沒有向d3.geoPath()提供一個投影，它將使用一個空投影，將輸入坐標視為像素坐標。這不會讓你簡單地將地圖向右移動：地理慣例是緯度隨著向北移動而增加（通常是在地圖上向上移動），而SVG/Canvas慣例是像素Y值隨著向下移動而增加

 projection.fitSize([width, height],data)