为什么这个 geojson 不使用 D3 渲染？
Why is this geojson not rendering with D3?
我正在尝试根据美国县相关数据创建可视化。当我在在线验证器和工具中使用 json 数据集时，各县呈现良好。但是当我尝试渲染基本地图时，屏幕变成空白。 svg 路径附加到 svg 并且它们的 d 属性值看起来适合我，这是一个示例路径（对应于下面列出的特征数组中的第一个对象 json）：
<path d="M-85.388717,33.913044L-85.391495,33.927068L-85.398837,33.964129L-85.407637,33.964204L-85.407831,33.960548L-85.425444,33.960645L-85.425627,33.957069L-85.495289,33.95691L-85.49582,33.942394L-85.530094,33.941423L-85.531812,33.903049L-85.532482,33.889152L-85.597063,33.889703L-85.601858,33.88975L-85.601913,33.875101L-85.601899,33.874865L-85.637014,33.875944L-85.637012,33.875273L-85.637126,33.846497L-85.636882,33.846495L-85.585201,33.84592L-85.585985,33.802095L-85.603391,33.802344L-85.603465,33.788474L-85.603469,33.787755L-85.62089,33.787944L-85.621019,33.782331L-85.621245,33.773508L-85.638049,33.773339L-85.638586,33.649158L-85.638579,33.648413L-85.64704,33.648772L-85.64719,33.641529L-85.651283,33.64157L-85.651295,33.637972L-85.655549,33.638127L-85.65581,33.627166L-85.674932,33.627254L-85.690684,33.627789L-85.690716,33.625105L-85.69014,33.615815L-85.689954,33.612909L-85.723074,33.613505L-85.72365,33.613491L-85.72367,33.613492L-85.724953,33.613539L-85.724517,33.59943L-85.737379,33.599823L-85.742202,33.600002L-85.742348,33.586553L-85.744118,33.556075L-85.796054,33.55622L-85.796852,33.541849L-85.849839,33.49969L-85.85189,33.498742L-85.852421,33.491644L-85.869308,33.491574L-85.870053,33.476757L-85.887675,33.476768L-85.887782,33.469427L-85.782735,33.469349L-85.782689,33.483638L-85.781244,33.483625L-85.765631,33.483477L-85.765308,33.496862L-85.765427,33.498593L-85.740983,33.498376L-85.680346,33.496623L-85.66722,33.496293L-85.643482,33.495885L-85.627835,33.495624L-85.623645,33.495373L-85.623387,33.495371L-85.565653,33.494992L-85.563763,33.495081L-85.539922,33.494743L-85.527515,33.494608L-85.52513,33.494781L-85.51731,33.494524L-85.501645,33.494456L-85.497455,33.494624L-85.355315,33.49248L-85.352573,33.492438L-85.352576,33.494538L-85.354491,33.498866L-85.351594,33.4996L-85.349958,33.501216L-85.346705,33.501148L-85.344923,33.497608L-85.342544,33.495961L-85.33828,33.4947L-85.331061,33.491014L-85.324856,33.489161L-85.320893,33.488359L-85.316028,33.488267L-85.314852,33.487603L-85.30925,33.483137L-85.308211,33.481579L-85.304439,33.482884L-85.313999,33.529807L-85.314091,33.530218L-85.314843,33.534951L-85.314994,33.535898L-85.31534,33.537646L-85.323792,33.580339L-85.342722,33.675953L-85.344054,33.682684L-85.355252,33.739245L-85.357402,33.750104L-85.360491,33.767958L-85.361844,33.773951L-85.364595,33.788446L-85.376403,33.850656L-85.377426,33.856047L-85.379455,33.866291L-85.380885,33.873508Z"></path>
但是，视觉上什么都没有。我检查了添加填充和描边值，但没有结果。我还尝试放大路径以查看它们是否渲染得太小，尺寸增加，浏览器开发工具显示尺寸较大，但视觉上我们仍然有一个空白区域。
这是我用来尝试生成地图的代码：
./corrected.json
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "GEO_ID": "0500000US01029", "STATE": "01", "COUNTY": "029", "NAME": "Cleburne", "LSAD": "County", "CENSUSAREA": 560.100000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -85.388717, 33.913044 ], [ -85.380885, 33.873508 ], [ -85.379455, 33.866291 ], [ -85.377426, 33.856047 ], [ -85.376403, 33.850656 ], [ -85.364595, 33.788446 ], [ -85.361844, 33.773951 ], [ -85.360491, 33.767958 ], [ -85.357402, 33.750104 ], [ -85.355252, 33.739245 ], [ -85.344054, 33.682684 ], [ -85.342722, 33.675953 ], [ -85.323792, 33.580339 ], [ -85.315340, 33.537646 ], [ -85.314994, 33.535898 ], [ -85.314843, 33.534951 ], [ -85.314091, 33.530218 ], [ -85.313999, 33.529807 ], [ -85.304439, 33.482884 ], [ -85.308211, 33.481579 ], [ -85.309250, 33.483137 ], [ -85.314852, 33.487603 ], [ -85.316028, 33.488267 ], [ -85.320893, 33.488359 ], [ -85.324856, 33.489161 ], [ -85.331061, 33.491014 ], [ -85.338280, 33.494700 ], [ -85.342544, 33.495961 ], [ -85.344923, 33.497608 ], [ -85.346705, 33.501148 ], [ -85.349958, 33.501216 ], [ -85.351594, 33.499600 ], [ -85.354491, 33.498866 ], [ -85.352576, 33.494538 ], [ -85.352573, 33.492438 ], [ -85.355315, 33.492480 ], [ -85.497455, 33.494624 ], [ -85.501645, 33.494456 ], [ -85.517310, 33.494524 ], [ -85.525130, 33.494781 ], [ -85.527515, 33.494608 ], [ -85.539922, 33.494743 ], [ -85.563763, 33.495081 ], [ -85.565653, 33.494992 ], [ -85.623387, 33.495371 ], [ -85.623645, 33.495373 ], [ -85.627835, 33.495624 ], [ -85.643482, 33.495885 ], [ -85.667220, 33.496293 ], [ -85.680346, 33.496623 ], [ -85.740983, 33.498376 ], [ -85.765427, 33.498593 ], [ -85.765308, 33.496862 ], [ -85.765631, 33.483477 ], [ -85.781244, 33.483625 ], [ -85.782689, 33.483638 ], [ -85.782735, 33.469349 ], [ -85.887782, 33.469427 ], [ -85.887675, 33.476768 ], [ -85.870053, 33.476757 ], [ -85.869308, 33.491574 ], [ -85.852421, 33.491644 ], [ -85.851890, 33.498742 ], [ -85.849839, 33.499690 ], [ -85.796852, 33.541849 ], [ -85.796054, 33.556220 ], [ -85.744118, 33.556075 ], [ -85.742348, 33.586553 ], [ -85.742202, 33.600002 ], [ -85.737379, 33.599823 ], [ -85.724517, 33.599430 ], [ -85.724953, 33.613539 ], [ -85.723670, 33.613492 ], [ -85.723650, 33.613491 ], [ -85.723074, 33.613505 ], [ -85.689954, 33.612909 ], [ -85.690140, 33.615815 ], [ -85.690716, 33.625105 ], [ -85.690684, 33.627789 ], [ -85.674932, 33.627254 ], [ -85.655810, 33.627166 ], [ -85.655549, 33.638127 ], [ -85.651295, 33.637972 ], [ -85.651283, 33.641570 ], [ -85.647190, 33.641529 ], [ -85.647040, 33.648772 ], [ -85.638579, 33.648413 ], [ -85.638586, 33.649158 ], [ -85.638049, 33.773339 ], [ -85.621245, 33.773508 ], [ -85.621019, 33.782331 ], [ -85.620890, 33.787944 ], [ -85.603469, 33.787755 ], [ -85.603465, 33.788474 ], [ -85.603391, 33.802344 ], [ -85.585985, 33.802095 ], [ -85.585201, 33.845920 ], [ -85.636882, 33.846495 ], [ -85.637126, 33.846497 ], [ -85.637012, 33.875273 ], [ -85.637014, 33.875944 ], [ -85.601899, 33.874865 ], [ -85.601913, 33.875101 ], [ -85.601858, 33.889750 ], [ -85.597063, 33.889703 ], [ -85.532482, 33.889152 ], [ -85.531812, 33.903049 ], [ -85.530094, 33.941423 ], [ -85.495820, 33.942394 ], [ -85.495289, 33.956910 ], [ -85.425627, 33.957069 ], [ -85.425444, 33.960645 ], [ -85.407831, 33.960548 ], [ -85.407637, 33.964204 ], [ -85.398837, 33.964129 ], [ -85.391495, 33.927068 ], [ -85.388717, 33.913044 ] ] ] } }
,
{ "type": "Feature", "properties": { "GEO_ID": "0500000US01031", "STATE": "01", "COUNTY": "031", "NAME": "Coffee", "LSAD": "County", "CENSUSAREA": 678.972000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -86.030441, 31.618939 ], [ -86.004085, 31.619067 ], [ -85.999948, 31.619311 ], [ -85.980098, 31.619189 ], [ -85.926702, 31.618966 ], [ -85.904460, 31.618775 ], [ -85.899202, 31.618729 ], [ -85.878888, 31.618547 ], [ -85.832214, 31.618240 ], [ -85.789142, 31.617964 ], [ -85.789141, 31.587866 ], [ -85.789140, 31.540617 ], [ -85.789308, 31.490925 ], [ -85.789370, 31.487561 ], [ -85.789372, 31.487430 ], [ -85.790294, 31.431467 ], [ -85.789837, 31.385469 ], [ -85.789815, 31.383145 ], [ -85.789594, 31.372698 ], [ -85.789754, 31.358887 ], [ -85.789785, 31.356562 ], [ -85.789866, 31.350574 ], [ -85.790001, 31.342857 ], [ -85.789975, 31.341524 ], [ -85.790064, 31.337277 ], [ -85.790065, 31.336908 ], [ -85.790100, 31.336276 ], [ -85.790116, 31.330082 ], [ -85.790327, 31.323452 ], [ -85.790434, 31.320267 ], [ -85.790525, 31.317495 ], [ -85.791089, 31.297603 ], [ -85.791167, 31.295340 ], [ -85.791243, 31.294184 ], [ -85.791245, 31.294004 ], [ -85.791214, 31.293551 ], [ -85.791218, 31.293252 ], [ -85.791361, 31.291777 ], [ -85.791312, 31.269325 ], [ -85.791291, 31.209854 ], [ -85.791402, 31.196349 ], [ -85.847766, 31.196369 ], [ -85.857352, 31.196367 ], [ -85.857999, 31.196374 ], [ -85.865347, 31.196374 ], [ -85.882227, 31.196339 ], [ -85.938287, 31.196344 ], [ -85.949386, 31.196123 ], [ -85.950142, 31.196242 ], [ -85.960322, 31.195962 ], [ -85.966110, 31.195935 ], [ -85.999042, 31.195777 ], [ -86.013060, 31.195318 ], [ -86.058535, 31.194082 ], [ -86.116734, 31.193015 ], [ -86.116735, 31.183885 ], [ -86.116736, 31.182099 ], [ -86.125405, 31.182057 ], [ -86.125482, 31.192754 ], [ -86.141674, 31.192693 ], [ -86.193476, 31.192213 ], [ -86.194003, 31.211362 ], [ -86.193542, 31.213028 ], [ -86.193846, 31.219589 ], [ -86.193714, 31.243119 ], [ -86.193336, 31.250169 ], [ -86.193546, 31.262915 ], [ -86.193888, 31.283526 ], [ -86.194631, 31.327933 ], [ -86.194779, 31.336812 ], [ -86.195044, 31.352681 ], [ -86.195056, 31.353359 ], [ -86.196091, 31.410348 ], [ -86.196365, 31.425431 ], [ -86.193951, 31.440072 ], [ -86.193973, 31.446586 ], [ -86.194724, 31.524460 ], [ -86.194784, 31.529949 ], [ -86.182098, 31.530047 ], [ -86.156561, 31.530203 ], [ -86.156768, 31.537527 ], [ -86.150314, 31.537601 ], [ -86.143950, 31.537675 ], [ -86.144761, 31.570994 ], [ -86.145895, 31.617741 ], [ -86.124952, 31.618044 ], [ -86.123834, 31.618167 ], [ -86.094925, 31.618405 ], [ -86.058021, 31.618793 ], [ -86.030441, 31.618939 ] ] ] } }
]
}
./maps.html
<html>
<div id="map-container"></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")
.append("svg")
.attr("id", "map")
.attr("height", h)
.attr("width", w)
.attr("fill", "blue")
.append("title")
.text("Southeastern Region Counties")
.attr("id", "title");
let maplink = "./corrected.json";
Promise.all([d3.json(maplink)]).then(([data]) => {
let paths = d3.select("#map").selectAll("path").data(data.features);
paths.enter().append("path").attr('d', path);
});
我没有看到任何错误消息，也没有在文档中找到我的错误。我错过了什么？
您的坐标是未投影的，是经纬度对的集合，但您将这些坐标视为像素坐标。这显示了您生成的路径数据：M-85.388717,33.913044，一个坐标代表 -85° E，34° N。x 值，这里的经度，是负的意味着您的地图呈现在 SVG 之外 - 在它的左边，因此为什么它不可见。
您需要通过地理投影 运行 您的纬度经度对，该地理投影将这些点放在 3D 球体上并将它们投影到 SVG 的 2D 平面上。这样做会引入一定程度的失真，因此您可能想尝试一些投影（尽管如果放大足够大，例如在城市上，这通常是最小的）。
如果您不向 d3.geoPath() 提供投影，它将使用将输入坐标视为像素坐标的空投影。这不会让您简单地将地图向右移动：地理惯例是纬度随着向北移动而增加（通常在地图上向上），而 SVG/Canvas 惯例是像素 y 值随着向下移动而增加
例如，要使用阿尔伯斯投影，您可以使用：
var projection = d3.geoAlbers();
var path = d3.geoPath().projection(projection);
这让我们完成了一半：投影独立于您的特征，我们需要适当地居中和缩放投影。为此，在我们加载 geojson 之后，我们可以使用：
projection.fitSize([width,height],data)
其中 data 是一个 geojson object（因此我们不使用 data.features）。
我正在尝试根据美国县相关数据创建可视化。当我在在线验证器和工具中使用 json 数据集时，各县呈现良好。但是当我尝试渲染基本地图时，屏幕变成空白。 svg 路径附加到 svg 并且它们的 d 属性值看起来适合我，这是一个示例路径（对应于下面列出的特征数组中的第一个对象 json）：
<path d="M-85.388717,33.913044L-85.391495,33.927068L-85.398837,33.964129L-85.407637,33.964204L-85.407831,33.960548L-85.425444,33.960645L-85.425627,33.957069L-85.495289,33.95691L-85.49582,33.942394L-85.530094,33.941423L-85.531812,33.903049L-85.532482,33.889152L-85.597063,33.889703L-85.601858,33.88975L-85.601913,33.875101L-85.601899,33.874865L-85.637014,33.875944L-85.637012,33.875273L-85.637126,33.846497L-85.636882,33.846495L-85.585201,33.84592L-85.585985,33.802095L-85.603391,33.802344L-85.603465,33.788474L-85.603469,33.787755L-85.62089,33.787944L-85.621019,33.782331L-85.621245,33.773508L-85.638049,33.773339L-85.638586,33.649158L-85.638579,33.648413L-85.64704,33.648772L-85.64719,33.641529L-85.651283,33.64157L-85.651295,33.637972L-85.655549,33.638127L-85.65581,33.627166L-85.674932,33.627254L-85.690684,33.627789L-85.690716,33.625105L-85.69014,33.615815L-85.689954,33.612909L-85.723074,33.613505L-85.72365,33.613491L-85.72367,33.613492L-85.724953,33.613539L-85.724517,33.59943L-85.737379,33.599823L-85.742202,33.600002L-85.742348,33.586553L-85.744118,33.556075L-85.796054,33.55622L-85.796852,33.541849L-85.849839,33.49969L-85.85189,33.498742L-85.852421,33.491644L-85.869308,33.491574L-85.870053,33.476757L-85.887675,33.476768L-85.887782,33.469427L-85.782735,33.469349L-85.782689,33.483638L-85.781244,33.483625L-85.765631,33.483477L-85.765308,33.496862L-85.765427,33.498593L-85.740983,33.498376L-85.680346,33.496623L-85.66722,33.496293L-85.643482,33.495885L-85.627835,33.495624L-85.623645,33.495373L-85.623387,33.495371L-85.565653,33.494992L-85.563763,33.495081L-85.539922,33.494743L-85.527515,33.494608L-85.52513,33.494781L-85.51731,33.494524L-85.501645,33.494456L-85.497455,33.494624L-85.355315,33.49248L-85.352573,33.492438L-85.352576,33.494538L-85.354491,33.498866L-85.351594,33.4996L-85.349958,33.501216L-85.346705,33.501148L-85.344923,33.497608L-85.342544,33.495961L-85.33828,33.4947L-85.331061,33.491014L-85.324856,33.489161L-85.320893,33.488359L-85.316028,33.488267L-85.314852,33.487603L-85.30925,33.483137L-85.308211,33.481579L-85.304439,33.482884L-85.313999,33.529807L-85.314091,33.530218L-85.314843,33.534951L-85.314994,33.535898L-85.31534,33.537646L-85.323792,33.580339L-85.342722,33.675953L-85.344054,33.682684L-85.355252,33.739245L-85.357402,33.750104L-85.360491,33.767958L-85.361844,33.773951L-85.364595,33.788446L-85.376403,33.850656L-85.377426,33.856047L-85.379455,33.866291L-85.380885,33.873508Z"></path>
但是，视觉上什么都没有。我检查了添加填充和描边值，但没有结果。我还尝试放大路径以查看它们是否渲染得太小，尺寸增加，浏览器开发工具显示尺寸较大，但视觉上我们仍然有一个空白区域。
这是我用来尝试生成地图的代码：
./corrected.json
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "GEO_ID": "0500000US01029", "STATE": "01", "COUNTY": "029", "NAME": "Cleburne", "LSAD": "County", "CENSUSAREA": 560.100000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -85.388717, 33.913044 ], [ -85.380885, 33.873508 ], [ -85.379455, 33.866291 ], [ -85.377426, 33.856047 ], [ -85.376403, 33.850656 ], [ -85.364595, 33.788446 ], [ -85.361844, 33.773951 ], [ -85.360491, 33.767958 ], [ -85.357402, 33.750104 ], [ -85.355252, 33.739245 ], [ -85.344054, 33.682684 ], [ -85.342722, 33.675953 ], [ -85.323792, 33.580339 ], [ -85.315340, 33.537646 ], [ -85.314994, 33.535898 ], [ -85.314843, 33.534951 ], [ -85.314091, 33.530218 ], [ -85.313999, 33.529807 ], [ -85.304439, 33.482884 ], [ -85.308211, 33.481579 ], [ -85.309250, 33.483137 ], [ -85.314852, 33.487603 ], [ -85.316028, 33.488267 ], [ -85.320893, 33.488359 ], [ -85.324856, 33.489161 ], [ -85.331061, 33.491014 ], [ -85.338280, 33.494700 ], [ -85.342544, 33.495961 ], [ -85.344923, 33.497608 ], [ -85.346705, 33.501148 ], [ -85.349958, 33.501216 ], [ -85.351594, 33.499600 ], [ -85.354491, 33.498866 ], [ -85.352576, 33.494538 ], [ -85.352573, 33.492438 ], [ -85.355315, 33.492480 ], [ -85.497455, 33.494624 ], [ -85.501645, 33.494456 ], [ -85.517310, 33.494524 ], [ -85.525130, 33.494781 ], [ -85.527515, 33.494608 ], [ -85.539922, 33.494743 ], [ -85.563763, 33.495081 ], [ -85.565653, 33.494992 ], [ -85.623387, 33.495371 ], [ -85.623645, 33.495373 ], [ -85.627835, 33.495624 ], [ -85.643482, 33.495885 ], [ -85.667220, 33.496293 ], [ -85.680346, 33.496623 ], [ -85.740983, 33.498376 ], [ -85.765427, 33.498593 ], [ -85.765308, 33.496862 ], [ -85.765631, 33.483477 ], [ -85.781244, 33.483625 ], [ -85.782689, 33.483638 ], [ -85.782735, 33.469349 ], [ -85.887782, 33.469427 ], [ -85.887675, 33.476768 ], [ -85.870053, 33.476757 ], [ -85.869308, 33.491574 ], [ -85.852421, 33.491644 ], [ -85.851890, 33.498742 ], [ -85.849839, 33.499690 ], [ -85.796852, 33.541849 ], [ -85.796054, 33.556220 ], [ -85.744118, 33.556075 ], [ -85.742348, 33.586553 ], [ -85.742202, 33.600002 ], [ -85.737379, 33.599823 ], [ -85.724517, 33.599430 ], [ -85.724953, 33.613539 ], [ -85.723670, 33.613492 ], [ -85.723650, 33.613491 ], [ -85.723074, 33.613505 ], [ -85.689954, 33.612909 ], [ -85.690140, 33.615815 ], [ -85.690716, 33.625105 ], [ -85.690684, 33.627789 ], [ -85.674932, 33.627254 ], [ -85.655810, 33.627166 ], [ -85.655549, 33.638127 ], [ -85.651295, 33.637972 ], [ -85.651283, 33.641570 ], [ -85.647190, 33.641529 ], [ -85.647040, 33.648772 ], [ -85.638579, 33.648413 ], [ -85.638586, 33.649158 ], [ -85.638049, 33.773339 ], [ -85.621245, 33.773508 ], [ -85.621019, 33.782331 ], [ -85.620890, 33.787944 ], [ -85.603469, 33.787755 ], [ -85.603465, 33.788474 ], [ -85.603391, 33.802344 ], [ -85.585985, 33.802095 ], [ -85.585201, 33.845920 ], [ -85.636882, 33.846495 ], [ -85.637126, 33.846497 ], [ -85.637012, 33.875273 ], [ -85.637014, 33.875944 ], [ -85.601899, 33.874865 ], [ -85.601913, 33.875101 ], [ -85.601858, 33.889750 ], [ -85.597063, 33.889703 ], [ -85.532482, 33.889152 ], [ -85.531812, 33.903049 ], [ -85.530094, 33.941423 ], [ -85.495820, 33.942394 ], [ -85.495289, 33.956910 ], [ -85.425627, 33.957069 ], [ -85.425444, 33.960645 ], [ -85.407831, 33.960548 ], [ -85.407637, 33.964204 ], [ -85.398837, 33.964129 ], [ -85.391495, 33.927068 ], [ -85.388717, 33.913044 ] ] ] } }
,
{ "type": "Feature", "properties": { "GEO_ID": "0500000US01031", "STATE": "01", "COUNTY": "031", "NAME": "Coffee", "LSAD": "County", "CENSUSAREA": 678.972000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -86.030441, 31.618939 ], [ -86.004085, 31.619067 ], [ -85.999948, 31.619311 ], [ -85.980098, 31.619189 ], [ -85.926702, 31.618966 ], [ -85.904460, 31.618775 ], [ -85.899202, 31.618729 ], [ -85.878888, 31.618547 ], [ -85.832214, 31.618240 ], [ -85.789142, 31.617964 ], [ -85.789141, 31.587866 ], [ -85.789140, 31.540617 ], [ -85.789308, 31.490925 ], [ -85.789370, 31.487561 ], [ -85.789372, 31.487430 ], [ -85.790294, 31.431467 ], [ -85.789837, 31.385469 ], [ -85.789815, 31.383145 ], [ -85.789594, 31.372698 ], [ -85.789754, 31.358887 ], [ -85.789785, 31.356562 ], [ -85.789866, 31.350574 ], [ -85.790001, 31.342857 ], [ -85.789975, 31.341524 ], [ -85.790064, 31.337277 ], [ -85.790065, 31.336908 ], [ -85.790100, 31.336276 ], [ -85.790116, 31.330082 ], [ -85.790327, 31.323452 ], [ -85.790434, 31.320267 ], [ -85.790525, 31.317495 ], [ -85.791089, 31.297603 ], [ -85.791167, 31.295340 ], [ -85.791243, 31.294184 ], [ -85.791245, 31.294004 ], [ -85.791214, 31.293551 ], [ -85.791218, 31.293252 ], [ -85.791361, 31.291777 ], [ -85.791312, 31.269325 ], [ -85.791291, 31.209854 ], [ -85.791402, 31.196349 ], [ -85.847766, 31.196369 ], [ -85.857352, 31.196367 ], [ -85.857999, 31.196374 ], [ -85.865347, 31.196374 ], [ -85.882227, 31.196339 ], [ -85.938287, 31.196344 ], [ -85.949386, 31.196123 ], [ -85.950142, 31.196242 ], [ -85.960322, 31.195962 ], [ -85.966110, 31.195935 ], [ -85.999042, 31.195777 ], [ -86.013060, 31.195318 ], [ -86.058535, 31.194082 ], [ -86.116734, 31.193015 ], [ -86.116735, 31.183885 ], [ -86.116736, 31.182099 ], [ -86.125405, 31.182057 ], [ -86.125482, 31.192754 ], [ -86.141674, 31.192693 ], [ -86.193476, 31.192213 ], [ -86.194003, 31.211362 ], [ -86.193542, 31.213028 ], [ -86.193846, 31.219589 ], [ -86.193714, 31.243119 ], [ -86.193336, 31.250169 ], [ -86.193546, 31.262915 ], [ -86.193888, 31.283526 ], [ -86.194631, 31.327933 ], [ -86.194779, 31.336812 ], [ -86.195044, 31.352681 ], [ -86.195056, 31.353359 ], [ -86.196091, 31.410348 ], [ -86.196365, 31.425431 ], [ -86.193951, 31.440072 ], [ -86.193973, 31.446586 ], [ -86.194724, 31.524460 ], [ -86.194784, 31.529949 ], [ -86.182098, 31.530047 ], [ -86.156561, 31.530203 ], [ -86.156768, 31.537527 ], [ -86.150314, 31.537601 ], [ -86.143950, 31.537675 ], [ -86.144761, 31.570994 ], [ -86.145895, 31.617741 ], [ -86.124952, 31.618044 ], [ -86.123834, 31.618167 ], [ -86.094925, 31.618405 ], [ -86.058021, 31.618793 ], [ -86.030441, 31.618939 ] ] ] } }
]
}
./maps.html
<html>
<div id="map-container"></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")
.append("svg")
.attr("id", "map")
.attr("height", h)
.attr("width", w)
.attr("fill", "blue")
.append("title")
.text("Southeastern Region Counties")
.attr("id", "title");
let maplink = "./corrected.json";
Promise.all([d3.json(maplink)]).then(([data]) => {
let paths = d3.select("#map").selectAll("path").data(data.features);
paths.enter().append("path").attr('d', path);
});
我没有看到任何错误消息，也没有在文档中找到我的错误。我错过了什么？
您的坐标是未投影的，是经纬度对的集合，但您将这些坐标视为像素坐标。这显示了您生成的路径数据：M-85.388717,33.913044，一个坐标代表 -85° E，34° N。x 值，这里的经度，是负的意味着您的地图呈现在 SVG 之外 - 在它的左边，因此为什么它不可见。
您需要通过地理投影 运行 您的纬度经度对，该地理投影将这些点放在 3D 球体上并将它们投影到 SVG 的 2D 平面上。这样做会引入一定程度的失真，因此您可能想尝试一些投影（尽管如果放大足够大，例如在城市上，这通常是最小的）。
如果您不向 d3.geoPath() 提供投影，它将使用将输入坐标视为像素坐标的空投影。这不会让您简单地将地图向右移动：地理惯例是纬度随着向北移动而增加（通常在地图上向上），而 SVG/Canvas 惯例是像素 y 值随着向下移动而增加
例如，要使用阿尔伯斯投影，您可以使用：
var projection = d3.geoAlbers();
var path = d3.geoPath().projection(projection);
这让我们完成了一半：投影独立于您的特征，我们需要适当地居中和缩放投影。为此，在我们加载 geojson 之后，我们可以使用：
projection.fitSize([width,height],data)
其中 data 是一个 geojson object（因此我们不使用 data.features）。