react-vis - “react-vis”我如何在特定点上显示十字准线

Question

我希望能够(在图表加载时)在图表上的特定点上显示“十字线”。

我现在的十字准线可以正确显示来自 9 y 轴的数据的十字准线(x 轴是时间一)。

我搜索了文档和示例，但没有看到任何这样的东西。

十字准线文档: https://uber.github.io/react-vis/documentation/api-reference/crosshair https://github.com/uber/react-vis/blob/master/docs/crosshair.md

React vis 事件处理程序: https://github.com/uber/react-vis/blob/master/docs/interaction.md

React 实例: https://uber.github.io/react-vis/

import {
  XYPlot,
  XAxis,
  YAxis,
  VerticalGridLines,
  HorizontalGridLines,
  LineSeries,
  Crosshair
} from 'index';

const DATA = [
  [{x: 1, y: 10}, {x: 2, y: 7}, {x: 3, y: 15}],
  [{x: 1, y: 20}, {x: 2, y: 5}, {x: 3, y: 15}]
];

export default class DynamicCrosshair extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      crosshairValues: []
    };
  }

  /**
   * Event handler for onMouseLeave.
   * @private
   */
  _onMouseLeave = () => {
    this.setState({crosshairValues: []});
  };

  /**
   * Event handler for onNearestX.
   * @param {Object} value Selected value.
   * @param {index} index Index of the value in the data array.
   * @private
   */
  _onNearestX = (value, {index}) => {
    this.setState({crosshairValues: DATA.map(d => d[index])});
  };

  render() {
    return (
      <XYPlot onMouseLeave={this._onMouseLeave} width={300} height={300}>
        <VerticalGridLines />
        <HorizontalGridLines />
        <XAxis />
        <YAxis />
        <LineSeries onNearestX={this._onNearestX} data={DATA[0]} />
        <LineSeries data={DATA[1]} />
        <Crosshair
          values={this.state.crosshairValues}
          className={'test-class-name'}
        />
      </XYPlot>
    );
  }
}

在事件处理程序部分，有一个事件处理程序列表，但这些需要用户操作。我希望根据传递给它的状态来更改十字线位置。

根据我已经看到的情况，我不确定这是否可能？我不需要工具提示部分，所以我可以没有它，我所需要的只是十字准线。

感谢您对此问题的任何帮助/回答。

Answer 1

要回答我自己的问题，只需将给定数据的索引传递给十字准线组件即可完成。

示例:

this.state = {
      crosshairValues: lines.map(d => d[7])
    };

工作示例:

import React, { Component } from 'react';
import './App.css';
import '../node_modules/react-vis/dist/style.css';
import {
  XYPlot,
  XAxis,
  YAxis,
  HorizontalGridLines,
  VerticalGridLines,
  LineSeries,
  MarkSeries,
  Voronoi,
  Crosshair,
  GradientDefs,
  AreaSeries} from 'react-vis';

  const lines = [
    [{x: 1, y: 3}, {x: 2, y: 5}, {x: 3, y: 15}, {x: 4, y: 12}, {x: 5, y: 3}, {x: 6, y: 5}, {x: 7, y: 15}, {x: 8, y: 12},
    {x: 9, y: 3}, {x: 10, y: 5}, {x: 11, y: 15}, {x: 12, y: 12}, {x: 13, y: 3}, {x: 14, y: 5}, {x: 15, y: 15}, {x: 16, y: 12}],
    [{x: 1, y: 10}, {x: 2, y: 4}, {x: 3, y: 2}, {x: 4, y: 15}, {x: 5, y: 2}, {x: 6, y: 7}, {x: 7, y: 11}, {x: 8, y: 8},
      {x: 9, y: 10}, {x: 10, y: 4}, {x: 11, y: 2}, {x: 12, y: 15}, {x: 13, y: 2}, {x: 14, y: 7}, {x: 15, y: 11}, {x: 16, y: 8}],
    [{x: 1, y: 7}, {x: 2, y: 11}, {x: 3, y: 9}, {x: 4, y: 4}, {x: 5, y: 6}, {x: 6, y: 13}, {x: 7, y: 5}, {x: 8, y: 13},
      {x: 9, y: 7}, {x: 10, y: 11}, {x: 11, y: 9}, {x: 12, y: 4}, {x: 13, y: 6}, {x: 14, y: 13}, {x: 15, y: 5}, {x: 16, y: 13}]
  ].map((p, i) => p.map(d => ({...d, line: i})));
  const nodes = lines.reduce((acc, d) => [...acc, ...d], []);

  const getDomain = (data, key) => {
    const {min, max} = data.reduce(
      (acc, row) => ({
        min: Math.min(acc.min, row[key]),
        max: Math.max(acc.max, row[key])
      }),
      {min: Infinity, max: -Infinity}
    );
    return [min, max];
  };
  const xDomain = getDomain(nodes, 'x');
  const yDomain = getDomain(nodes, 'y');

  export default class Example extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      crosshairValues: lines.map(d => d[7])
    };
  }
    state = {
      hoveredNode: null
    };

    _onMouseLeave = () => {
      this.setState({crosshairValues: []});
    };

    _onNearestX = (value, {index}) => {
      this.setState({crosshairValues: lines.map(d => d[index])});
    };

    render() {  
      const {hoveredNode} = this.state;
      return (
        <div>
          <XYPlot
            xDomain={xDomain}
            yDomain={yDomain}
            margin={{top: 10, left: 40, bottom: 40, right: 10}}
            width={1900}
            height={300}
            onMouseLeave={this._onMouseLeave}
          >
             <GradientDefs>
              <linearGradient id="CoolGradient" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="red" stopOpacity={0.4}/>
                <stop offset="100%" stopColor="blue" stopOpacity={0.3} />
              </linearGradient>
            </GradientDefs>
            <HorizontalGridLines />
            <VerticalGridLines />
            <XAxis title="X Axis" />
            <YAxis title="Y Axis" />
            {lines.map((d, i) => (
              <AreaSeries 
                color={'url(#CoolGradient)'}
                key={i}
                opacity={hoveredNode && hoveredNode.line === i ? 1 : 0.3}
                data={d}
                onNearestX={this._onNearestX} 
              />
            ))}
            <Crosshair
              values={this.state.crosshairValues}
              className={'test-class-name'}
            />
          </XYPlot>
        </div>
      );
    }
  }

希望这能节省其他人的时间。