基于D3.js加载自定义JSON地图并实现悬停与点击跳转求助

看起来你在复刻Mike Bostock的县地图时踩了几个D3新手常见的坑，我帮你一步步排查并解决这些问题：

一、先修复GeoJSON版本的核心错误 #

你的第一个代码有两个致命问题：

• 未定义投影实例：你直接使用了albersProjection但根本没创建这个投影对象
• 错误加载JSON数据：把cwa.json作为脚本引入是不对的，D3需要用d3.json()异步加载地理数据

修正后的GeoJSON代码示例（带悬停+点击跳转）：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CWA Interactive Map</title>
  <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  <style>
    .cwa-area {
      fill: #ccc;
      stroke: #333;
      stroke-width: 0.5px;
      transition: fill 0.3s ease;
    }
    .cwa-area:hover {
      fill: #ff7f0e; /* 悬停高亮色可自定义 */
    }
  </style>
</head>
<body>
  <svg width="960" height="600"></svg>

  <script>
    var width = 960;
    var height = 600;

    var svg = d3.select("svg")
      .attr("width", width)
      .attr("height", height);

    // 创建适配美国区域的Albers投影（CWA是美国预警区，这个投影最合适）
    var projection = d3.geoAlbersUsa()
      .scale(1000)
      .translate([width / 2, height / 2]);

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

    // 正确加载GeoJSON数据（无需把JSON改成变量形式，直接用原始GeoJSON结构即可）
    d3.json("cwa.json", function(error, cwaData) {
      if (error) throw error;

      svg.selectAll(".cwa-area")
        .data(cwaData.features)
        .enter()
        .append("path")
        .attr("class", "cwa-area")
        .attr("d", geoPath)
        // 添加点击跳转功能（假设你的feature属性里有url字段，没有的话可以自行添加）
        .on("click", function(d) {
          if (d.properties.url) {
            window.open(d.properties.url, "_blank");
          } else {
            console.log("该区域未配置跳转链接");
          }
        });
    });
  </script>
</body>
</html>

二、修正TopoJSON转换与渲染问题 #

你转换TopoJSON时犯了命名不匹配的错误：

• 转换命令里用了tracts=cwa.ndjson，所以TopoJSON里的对象名是tracts，但代码里你写的是us.objects.counties，导致找不到数据

修正后的TopoJSON转换命令： #

ndjson-split 'd.features' < cwa.json > cwa.ndjson
geo2topo -n cwas=cwa.ndjson > cwa_topo.json

对应的TopoJSON渲染代码（带悬停+点击）： #

<!DOCTYPE html>
<style>
  .cwas :hover {
    fill: red;
  }
  .cwa-borders {
    fill: none;
    stroke: #fff;
    stroke-width: 0.5px;
    stroke-linejoin: round;
    pointer-events: none;
  }
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
  var svg = d3.select("svg");
  var path = d3.geoPath().projection(d3.geoAlbersUsa().scale(1000));

  d3.json("cwa_topo.json", function(error, us) {
    if (error) throw error;

    // 注意这里用us.objects.cwas，和转换命令里的名字对应
    var cwaFeatures = topojson.feature(us, us.objects.cwas).features;

    svg.append("g")
      .attr("class", "cwas")
      .selectAll("path")
      .data(cwaFeatures)
      .enter().append("path")
      .attr("d", path)
      .attr("fill", "#ccc")
      .attr("stroke", "#333")
      // 点击跳转功能
      .on("click", function(d) {
        // 替换成你实际的URL字段，比如d.properties.LINK或自定义字段
        var url = d.properties.url || "https://example.com";
        window.open(url, "_blank");
      });

    svg.append("path")
      .attr("class", "cwa-borders")
      .attr("d", path(topojson.mesh(us, us.objects.cwas, function(a, b) { return a !== b; })));
  });
</script>
</body>
</html>

三、关键注意事项 #

• 投影选择：CWA是美国的县预警区，d3.geoAlbersUsa()投影能自动适配美国本土、阿拉斯加和夏威夷的布局，比普通Albers投影更合适
• 数据字段：要实现点击跳转，需要在GeoJSON/TopoJSON的properties里添加每个区域对应的URL。如果原始数据没有，可以用QGIS打开shapefile，添加属性字段后再转JSON
• 性能优化：7MB的GeoJSON体积偏大，用TopoJSON能大幅压缩体积，加载更快，推荐最终版本使用TopoJSON
• 调试技巧：如果地图不显示，打开浏览器控制台（F12）查看报错信息，比如404找不到JSON文件、投影参数错误导致图形出界等

这样应该就能成功渲染出和Mike Bostock示例类似的交互式地图了，祝你顺利！

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