如何在D3交互式地图实现鼠标悬停显示信息并跳转指定URL？

没问题！我来帮你搞定这两个需求——鼠标悬停显示CWA和City信息，以及点击几何要素跳转到指定URL。结合你提供的TopoJSON结构，我给你整理了分步实现的示例代码：

首先我们需要创建一个用于显示提示的DOM元素，然后给地图的每个几何要素绑定鼠标事件，在悬停时展示对应的属性信息：

// 先创建tooltip元素，初始隐藏
const tooltip = d3.select("body")
  .append("div")
  .style("position", "absolute")
  .style("background", "#fff")
  .style("padding", "8px 12px")
  .style("border-radius", "4px")
  .style("box-shadow", "0 2px 4px rgba(0,0,0,0.1)")
  .style("pointer-events", "none")
  .style("opacity", 0);

// 绘制地图要素时绑定事件
svg.selectAll(".feature")
  .data(topojson.feature(yourTopoJson, yourTopoJson.objects.yourLayer).features)
  .enter()
  .append("path")
  .attr("d", path)
  .attr("class", "feature")
  // 鼠标悬停显示tooltip
  .on("mouseover", function(event, d) {
    tooltip.transition().duration(200).style("opacity", 0.9);
    // 从properties里取出CWA和City
    tooltip.html(`<strong>CWA:</strong> ${d.properties.CWA}<br><strong>City:</strong> ${d.properties.City}`)
      .style("left", (event.pageX + 10) + "px")
      .style("top", (event.pageY - 28) + "px");
  })
  // 鼠标移动时跟随位置
  .on("mousemove", function(event) {
    tooltip.style("left", (event.pageX + 10) + "px")
      .style("top", (event.pageY - 28) + "px");
  })
  // 鼠标离开隐藏tooltip
  .on("mouseout", function() {
    tooltip.transition().duration(200).style("opacity", 0);
  });

2.1 硬编码URL的方式 #

如果你的URL规则比较固定，或者数量不多，可以直接在点击事件里硬编码：

// 在之前的要素绘制代码里添加click事件
svg.selectAll(".feature")
  // ... 之前的data、enter、path、tooltip事件代码 ...
  .on("click", function(event, d) {
    // 根据CWA或者City匹配对应的URL
    let targetUrl;
    switch(d.properties.CWA) {
      case "ABC":
        targetUrl = "https://example.com/abc";
        break;
      case "DEF":
        targetUrl = "https://example.com/def";
        break;
      // 更多匹配规则...
      default:
        targetUrl = "https://example.com/default";
    }
    // 打开新窗口跳转，或者用window.location.href在当前页跳转
    window.open(targetUrl, "_blank");
  });

2.2 使用CSV文件存储URL的方式 #

如果URL数量多或者需要灵活维护，推荐用单独的CSV文件来存储（比如cwa_urls.csv，结构为CWA,URL），然后加载CSV并和TopoJSON数据关联：

// 先加载CSV文件，再绘制地图
d3.csv("cwa_urls.csv").then(function(urlData) {
  // 创建CWA到URL的映射对象
  const urlMap = new Map();
  urlData.forEach(row => {
    urlMap.set(row.CWA, row.URL);
  });

  // 然后绘制地图要素
  svg.selectAll(".feature")
    .data(topojson.feature(yourTopoJson, yourTopoJson.objects.yourLayer).features)
    .enter()
    .append("path")
    .attr("d", path)
    .attr("class", "feature")
    // ... 之前的tooltip事件代码 ...
    .on("click", function(event, d) {
      const targetUrl = urlMap.get(d.properties.CWA);
      if(targetUrl) {
        window.open(targetUrl, "_blank");
      } else {
        console.log(`No URL found for CWA: ${d.properties.CWA}`);
      }
    });
});

注意：记得把代码里的yourTopoJson、yourLayer替换成你实际的TopoJSON对象和图层名称，CSV文件的路径也要对应实际位置。

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