javascript - 在鼠标指针悬停的 react-vis 图表中添加一条垂直线

Question

我正在评估 react-vis。假设我有一个 react-vis simple chart ，当鼠标悬停在图表上时，如何添加一条随鼠标移动的垂直线？我的猜测是我需要在 XYPlot 中添加一个十字准线组件，也许还有一个 YAxis 组件。但是我不明白怎么做，也找不到任何相关的例子。

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

Answer 1

可以用 <Crosshair /> 添加一条垂直线成分。您可以在位于 here 的文档中使用此示例.你需要设置 onMouseLeave和 onNearestX处理程序更新 Crosshairs线的值(value)。诀窍是你必须把 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>;
}