如何在VictoryLine组件中获取鼠标悬停点的X、Y数据？

有两种可行的实现方式，可根据场景选择：

方法一：直接监听单个数据点的鼠标事件 #

把事件目标设为data（单个数据点）而非parent，就能在回调中拿到当前悬停点的具体数据：

<VictoryLine
  data={data}
  style={{ data: { stroke: Colors.green } }}
  events={[
    {
      target: 'data',
      eventHandlers: {
        onMouseOver: (props) => {
          // props.datum 为当前悬停的单个数据点对象
          const { x, y } = props.datum;
          // 这里可处理业务逻辑，比如打印、更新状态等
          console.log('悬停点X:', x, 'Y:', y);
          return []; // 无需样式突变时返回空数组
        }
      }
    }
  ]}
/>

方法二：使用VictoryVoronoiContainer（适合密集折线） #

如果折线数据点较密集，用Voronoi容器可让用户在折线附近区域也触发悬停，还能配合Tooltip展示数据：

import { VictoryLine, VictoryVoronoiContainer, VictoryTooltip } from 'victory';

<VictoryLine
  data={data}
  style={{ data: { stroke: Colors.green } }}
  containerComponent={
    <VictoryVoronoiContainer
      // 自定义tooltip显示内容
      labels={({ datum }) => `X: ${datum.x}\nY: ${datum.y}`}
      labelComponent={<VictoryTooltip />}
      // 激活时获取当前数据点
      onActivated={(props) => {
        const { x, y } = props.datum;
        console.log('悬停点数据：', x, y);
      }}
    />
  }
/>

说明 #

你之前的代码问题在于将事件目标设为parent，导致props.data返回所有数据点集合。将目标改为data后，即可通过props.datum获取当前悬停单个数据点的X、Y值。

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