如何在D3.js绘制的美国地图上实现mouseover显示CSV数据？

嘿，我来帮你搞定这个鼠标悬停提示的功能！你的代码已经完成了最关键的一步——把CSV里的生产力数据和GeoJSON的州数据关联起来了，接下来只需要添加鼠标事件处理和一个提示框就能实现需求。

步骤1：添加提示框的样式和元素 #

首先，在你的<style>标签里添加提示框的样式，让它看起来更美观且不干扰交互：

.tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  pointer-events: none; /* 防止提示框遮挡鼠标事件 */
  display: none; /* 默认隐藏 */
}

然后在<body>标签里（SVG元素前后都可以）添加这个提示框的DOM元素：

<div class="tooltip"></div>

步骤2：添加鼠标事件处理逻辑 #

在你的JavaScript代码里，先获取提示框的引用，再给每个州的路径元素绑定鼠标事件。

首先，在创建SVG元素之后，添加一行代码获取tooltip：

var tooltip = d3.select(".tooltip");

然后，在你创建路径元素的链式调用里，添加.on()方法来处理鼠标事件。修改后的路径创建代码如下：

//Bind data and create one path per GeoJSON feature
svg.selectAll("path")
  .data(json.features)
  .enter()
  .append("path")
  .attr("d", path)
  .style("fill", function(d) {
    //Get data value
    var value = d.properties.value;
    if (value <1.15) {
      //If value exists…
      return color(value);
    } else if (value >1.15) {
      return "red";
    } else {
      //If value is undefined…
      return "#ccc";
    }
  })
  // 鼠标悬停时显示提示
  .on("mouseover", function(d) {
    // 处理无数据的情况，避免显示undefined
    var displayValue = d.properties.value ? d.properties.value : "无数据";
    tooltip.style("display", "block")
      .html(`<strong>${d.properties.name}</strong><br>生产力: ${displayValue}`);
  })
  // 鼠标移出时隐藏提示
  .on("mouseout", function() {
    tooltip.style("display", "none");
  })
  // 鼠标移动时让提示框跟随鼠标位置
  .on("mousemove", function(event) {
    tooltip.style("left", (event.pageX + 10) + "px")
      .style("top", (event.pageY - 20) + "px");
  });

关键说明 #

你之前已经通过循环把CSV里的value合并到了GeoJSON的properties属性里，所以在mouseover函数里，直接通过d.properties.name就能拿到州名，d.properties.value就能拿到对应的生产力数据——这就是你需要引用的地方，不需要再去CSV里重新查找啦！

修改完之后，当你把鼠标悬停在某个州上面时，就会显示对应的州名和生产力数据，鼠标移出后提示框会自动隐藏，移动鼠标时提示框也会跟着移动哦！

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