Javascript 我如何得到反应'；s十字线是否仅显示距离鼠标光标最近的序列的数据？

我正在使用react-vis制作一个简单的数据可视化工具，但我不知道如何使十字线只显示最近鼠标悬停序列的y值。此外，我似乎找不到任何关于react vis的文档中指定的事件对象的文档。例如：

<LineSeries
    ...
  onSeriesMouseOver={(event)=>{
      // does something on mouse over
      // you can access the value of the event
  }}

{
//在老鼠身上做点什么
//您可以访问事件的值
}}

事件有哪些属性？我在这上面找不到任何东西

这是到目前为止我所拥有的图表组件的代码。我尝试将每个系列的选定状态存储在一个数组中（当前已注释掉），并仅将十字线值设置为该系列 当所述序列的状态为真时：

import React from 'react';
import {XYPlot, XAxis, YAxis, VerticalGridLines, HorizontalGridLines, 
    LineSeries, DiscreteColorLegend, Crosshair} from 'react-vis';

function hslToHex(h, s, l) {
    h /= 360;
    s /= 255;
    l /= 255;
    let r, g, b;
    if (s === 0) {
        r = g = b = l; // achromatic
    } 
    else {
        const hue2rgb = (p, q, t) => {
            if (t < 0) t += 1;
            if (t > 1) t -= 1;
            if (t < 1 / 6) return p + (q - p) * 6 * t;
            if (t < 1 / 2) return q;
            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
            return p;
        };
        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        const p = 2 * l - q;
        r = hue2rgb(p, q, h + 1 / 3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1 / 3);
    }
    const toHex = x => {
        const hex = Math.round(x * 255).toString(16);
        return hex.length === 1 ? '0' + hex : hex;
    };
    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
const series = [];
const invisiSeries = [];
const seriesColor = [];
const Chart = (props) => {

    const [crossVals, setCrossVals] = React.useState([]);
    const dataArr = [];
    for (var i = 0; i < props.data.length; i++) {
        dataArr.push(props.data[i].map((d)=> {
            return {x: d.TIME, y: d.Value};
        }));
    }
    const seriesNames = props.items.map(e => {
        return e.LOCATION + ' ' + e.SUBJECT; 
    });
    const isSelected = Array(dataArr.length).fill(false);

    for (i = 0; i < dataArr.length; i++) {
        if (seriesColor.length <= i) {
            seriesColor.push(hslToHex( (i * 360 * 3/10) % 360, 255, 128));
        }
        series.push(<LineSeries
            data={dataArr[i]}
            style={{stroke: seriesColor[i], strokeWidth: 3}}
            /*
            onSeriesMouseOver={(d) => {
                isSelected.fill(false);
                isSelected[i] = true;
            }}
            onSeriesMouseOut={(event)=>{
                isSelected[i] = false;
            }}
            */
            onNearestX={(value, {index}) => {
                // Tried only setting crossvals for the single LineSeries that has
                // its isSelected[i] set to true
                //if(isSelected[i] == true) {
                //  setCrossVals([d]));
                //}
                setCrossVals(dataArr.map(d => d[index]));
            }}/>);
        /*invisiSeries.push(<LineSeries
            data={dataArr[i]}
            style={{opacity: 0, strokeWidth: 10}}
            onNearestX={v => {
                setCrossVals([v]);
            }}/>);
            */
    }
    return (
        <div>
            <XYPlot
                xType="ordinal"
                width={1000}
                height={500}
                onMouseLeave={() => {setCrossVals([])}}>
                <VerticalGridLines />
                <HorizontalGridLines />
                <XAxis title="Year" tickLabelAngle={35} tickPadding={24}/>
                <YAxis title="KG per Capita" />
                    {series}
                <Crosshair values={crossVals}>
                </Crosshair>
            </XYPlot>
            <DiscreteColorLegend height={200} width={300} 
                items={props.items.map(e => {
                    return {title: e.LOCATION + ' ' + e.SUBJECT,
                    color: seriesColor[e.INDEX],
                    strokeWidth: 3}})} />
        </div>
    );
}
export default Chart;

从“React”导入React；
导入{XYPlot，XAxis，YAxis，垂直网格线，水平网格线，
线条系列，离散颜色图例，十字线}来自“react-vis”；
函数hslToHex（h、s、l）{
h/=360；
s/=255；
l/=255；
设r，g，b；
如果（s==0）{
r=g=b=l；//消色差
} 
否则{
常数hue2rgb=（p，q，t）=>{
如果（t<0）t+=1；
如果（t>1）t-=1；
如果（t<1/6）返回p+（q-p）*6*t；
如果（t<1/2）返回q；
如果（t<2/3）返回p+（q-p）*（2/3-t）*6；
返回p；
};
常数q=l<0.5？l*（1+s）：l+s-l*s；
常数p=2*l-q；
r=hue2rgb（p，q，h+1/3）；
g=hue2rgb（p，q，h）；
b=hue2rgb（p，q，h-1/3）；
}
常数toHex=x=>{
常量十六进制=数学四舍五入（x*255）.toString（16）；
返回十六进制。长度===1？'0'+十六进制：十六进制；
};
返回`${toHex（r）}${toHex（g）}${toHex（b）}`；
}
常数系列=[]；
常量invisiSeries=[]；
常量色=[]；
常量图表=（道具）=>{
const[crossVals，setCrossVals]=React.useState（[]）；
常量dataArr=[]；
对于（变量i=0；i{
返回{x:d.TIME，y:d.Value}；
}));
}
const seriesNames=props.items.map（e=>{
返回e.LOCATION+“”+e.SUBJECT；
});
const isSelected=数组（dataArr.length）.fill（false）；
对于（i=0；i{
//已尝试仅为已删除的单线列设置crossvals
//它被选为真
//如果（isSelected[i]==true）{
//setCrossVals（[d]）；
//}
setCrossVals（dataArr.map（d=>d[index]）；
}}/>);
/*invisiSeries.push（{
setCrossVals（[v]）；
}}/>);
*/
}
返回(
{setCrossVals（[]）}>
{series}
{
返回{title:e.LOCATION+''+e.SUBJECT，
颜色：系列颜色[e.INDEX]，
冲程宽度：3}}}/>
);
}
导出默认图表；

你好，请查看我的答案。我用它来显示当前悬停在

VerticalBarseries

中的条形图的X，Y值，我希望它也适用于

LineSeries