如何在React/Recharts.js中手动触发散点图点的悬停/点击事件

我明白你想实现的是：当Three.js模型上的点被悬停时，同步触发Recharts散点图中对应数据点的悬停效果（包括Tooltip显示）。之前通过ref获取Scatter组件实例的方法行不通，是因为你拿到的是组件内部的数据对象，而非真实DOM元素。下面是可行的解决方案：

步骤1：给每个散点添加唯一标识 #

首先，我们需要给Recharts中的每个散点SVG元素绑定一个和Three.js模型数据对应的唯一ID，这样后续才能精准定位到目标点。通过Scatter组件的dot属性自定义散点，添加data-id属性：

<Scatter 
  ref={this.scatter} 
  name="dataset" 
  data={data1} 
  onMouseOver={(e)=>this.handleClick(e)} 
  onMouseLeave={()=>this.handleMouseOut()}
  dot={(props) => {
    const { cx, cy, payload } = props;
    return (
      <circle 
        cx={cx} 
        cy={cy} 
        r={4} // 保持原有的点大小
        fill="#000" // 保持原有的颜色
        data-id={payload.id} // 绑定唯一标识，和Three.js数据的id对应
        onMouseOver={(e) => this.handleClick(e)}
        onMouseLeave={() => this.handleMouseOut()}
      />
    );
  }}
/>

步骤2：通过ID定位并触发鼠标事件 #

当Three.js模型的点被悬停时，根据对应的id找到Recharts中的散点DOM元素，然后手动触发mouseover事件；当模型上的点移出时，触发mouseleave事件。修改你的mouseSimulation方法：

mouseSimulation(eventType, targetId){
  // 根据data-id定位散点元素
  const scatterPoint = document.querySelector(`circle[data-id="${targetId}"]`);
  if (!scatterPoint) return;

  // 创建并触发对应的鼠标事件
  const mouseEvent = new MouseEvent(eventType, {
    bubbles: true,
    cancelable: true,
    view: window
  });
  scatterPoint.dispatchEvent(mouseEvent);

  // 如果是mouseover，保存当前元素引用，方便后续触发mouseout
  if (eventType === 'mouseover') {
    this.currentHoveredPoint = scatterPoint;
  }
}

步骤3：同步外部交互逻辑 #

现在，当你在Three.js中处理模型点的悬停时，调用这个方法即可：

• 悬停模型点时：this.mouseSimulation('mouseover', threeJsPointId)
• 移出模型点时：this.mouseSimulation('mouseleave', threeJsPointId)

为什么之前的方法无效？ #

你之前尝试访问chart.props.points，但这个points是Recharts组件内部维护的数据对象集合，并不是真实的DOM元素，所以调用point.click()不会触发任何浏览器事件。我们需要直接操作SVG的circle元素，才能让Recharts的Tooltip和悬停逻辑正常响应。

额外注意事项 #

• 确保payload.id和Three.js模型数据的id完全匹配，否则无法定位到对应点
• 事件的bubbles属性设为true，这样Recharts的内部事件监听才能捕获到这个手动触发的事件
• 如果需要处理多个点的悬停切换，记得先触发上一个点的mouseleave，再触发新点的mouseover

内容的提问来源于stack exchange，提问作者D. Chin