D3如何触发其他实体的mouseover事件：按钮悬停高亮地图州边界

步骤1：抽离公共交互逻辑 #

首先把原有的高亮、取消高亮逻辑从州的事件回调中抽成公共函数，避免重复写代码：

// 高亮指定州+弹出提示
function highlightState(stateElement, stateData) {
  d3.select(stateElement)
    .attr("stroke", "red")
    .attr("stroke-width", "3");
  displayData(stateData);
}

// 取消指定州高亮+隐藏提示
function unhighlightState(stateElement, stateData) {
  d3.select(stateElement)
    .attr("stroke", "black")
    .attr("stroke-width", "1");
  hideData(stateData);
}

步骤2：改造原有的州渲染逻辑 #

给每个州的路径元素添加唯一标识属性，同时建立「州ID-州数据」的映射表，方便后续按钮快速匹配对应州：

// 全局存储州ID和对应数据的映射
const stateIdToData = new Map();

// 你原有渲染GeoJSON州路径的逻辑，仅需新增2行属性绑定
d3.selectAll("path.state")
  .data(geoJsonFeatures) // 你的GeoJSON特征数组
  .enter()
  .append("path")
  .attr("class", "state")
  // 新增：给州路径加唯一标识，用你数据里的唯一字段即可，比如州FIPS码、州缩写
  .attr("data-state-id", d => d.properties.abbr)
  // 新增：存储映射关系
  .each(d => stateIdToData.set(d.properties.abbr, d))
  // 原来的事件绑定换成调用公共函数
  .on("mouseover", function(d) {
    highlightState(this, d);
  })
  .on("mouseout", function(d) {
    unhighlightState(this, d);
  });

步骤3：绑定侧边按钮的交互 #

每个侧边按钮也绑定对应州的唯一ID作为自定义属性，hover时直接通过ID匹配到对应州的路径元素，调用公共函数即可：

// 渲染小州对应的按钮时，给按钮加同样的唯一标识属性，示例按钮结构：<button class="state-btn" data-state-id="RI">罗德岛</button>
d3.selectAll(".state-btn")
  .on("mouseover", function() {
    // 拿到按钮对应的州ID
    const targetStateId = this.dataset.stateId;
    // 匹配到对应州的路径元素
    const targetStateEl = d3.select(`path.state[data-state-id="${targetStateId}"]`).node();
    // 拿到对应州的数据
    const targetStateData = stateIdToData.get(targetStateId);
    // 触发高亮逻辑
    highlightState(targetStateEl, targetStateData);
  })
  .on("mouseout", function() {
    const targetStateId = this.dataset.stateId;
    const targetStateEl = d3.select(`path.state[data-state-id="${targetStateId}"]`).node();
    const targetStateData = stateIdToData.get(targetStateId);
    unhighlightState(targetStateEl, targetStateData);
  });

不需要修改event.target的绑定，直接通过唯一标识匹配对应元素的方案实现成本最低，也不会和原有逻辑产生冲突。

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