在React-Vis图表中添加垂直线，其中鼠标悬停在其中

Question

我正在评估react-vis。假设我有一个React-Vis简单图表，如何添加一条悬停在图表时用鼠标移动的垂直线？我的猜测是，我需要在Xyplot中添加一个十字形组件，也许需要一个Yaxis组件。但是我不明白如何，我找不到任何恢复例子。

function Chart({data}) {
  return <XYPlot width={400} height={300}><XAxis/><YAxis/>
    <HorizontalGridLines />
    <VerticalGridLines />
    <LineMarkSeries data={data} />
    </XYPlot>;
}

Answer 1

可以使用<Crosshair />组件添加垂直线。您可以在此处的文档中使用此示例。您需要设置onMouseLeave和onNearestX处理程序以更新Crosshairs行的值。诀窍是您必须将divs放入Crosshair组件中，以免呈现值框。我正在使用React Hooks回答您的问题，但是您可以使用一堂课使用状态（React Hooks State Docs）。

import React, { useState } from 'react';
function Chart({data}) {
  const [points, setPoints] = useState([]);
  return <XYPlot
    width={400}
    height={300}
    onMouseLeave={() => setPoints([])}
    >
    <XAxis/>
    <YAxis/>
    <HorizontalGridLines />
    <VerticalGridLines />
    <LineMarkSeries
      data={data}
      onNearestX={v => setPoint([v])}
    />
    <Crosshair values={point}>
      {/* Divs inside Crosshair Component required to prevent value box render */}
      <div></div>
    </Crosshair>
  </XYPlot>;
}