D3.js地图未在DOM渲染求助（TopoJSON文件）

核心问题原因 #

1. 投影适配错误：使用d3.geoAlbersUsa()（美国全境专用投影）渲染纽约州地图，会导致目标地理范围偏离可视区域，地图元素被挤出SVG画布。
2. DOM加载时机问题：脚本在<head>中加载时，<div id="map">尚未完成渲染，d3.select('#map')无法找到目标元素，SVG容器根本没有被创建。

修复后的代码 #

JavaScript代码（NYmap.js） #

document.addEventListener('DOMContentLoaded', function() {
  var width = 900,
      height = 600;

  var svg = d3.select('#map')
      .append('svg')
      .attr('width', width)
      .attr('height', height);

  // 使用墨卡托投影，后续用数据自动适配边界
  var projection = d3.geoMercator();

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

  d3.json("https://gist.githubusercontent.com/Lupi7000/d770ce6f2985c3a7bac1099688e4f772/raw/d327f59834fb0f9f2201ad71c3f1711ecb5bf6de/NYTest.json")
      .then(function(d) {
        var counties = topojson.feature(d, d.objects.cb_2015_new_york_county_20m);
        // 让投影适配数据范围，确保地图填满SVG画布
        projection.fitSize([width, height], counties);
        svg.selectAll('path')
          .data(counties.features)
          .enter().append('path')
          .attr('d', path)
          .style('stroke', '#fff')
          .style('fill', '#666');
      });
});

HTML代码 #

<html>
  <head>
    <meta charset="UTF-8">
    <title> NYS Map</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://unpkg.com/topojson@3.0.2/dist/topojson.min.js"></script>
    <script src="https://unpkg.com/topojson-client@3"></script>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h3> NYS MAP CLICKABLE AND SHIT... EVENTUALLY</h3>
    <div id="map"><!-- MAP CONTAINER --></div>
    <!-- 将脚本移至body末尾，确保DOM渲染完成后执行 -->
    <script src="NYmap.js"></script>
  </body>
</html>

CSS代码（可保留或微调） #

body {
  margin: 25px;
}

#map {
  width: 900px;
  height: 600px;
  border: 1px solid black;
  background: whitesmoke;
}

path {
  fill: #666;
  stroke: #fff;
  stroke-width: 1px;
}

关键修复说明 #

• 用DOMContentLoaded事件包裹代码，确保脚本在DOM完全加载后执行，避免找不到#map元素。
• 替换为d3.geoMercator()通用投影，调用.fitSize([width, height], counties)让投影自动适配纽约州的地理边界，确保地图完整显示在SVG画布内。
• 添加白色描边样式，让各个县的边界更清晰，便于验证渲染效果。

内容的提问来源于stack exchange，提问作者Lupi7000