需要select react中点的范围google 鼠标拖动散点图

Question

在问题之后，我一直在尝试使@whitehat 接受的答案与 react-google-charts 散点图一起使用。

我设法创建了矩形，但拖动速度很慢，我认为这是由于每次更改都重新渲染所致。我尝试将 div_select 作为导入组件并将其放在 scatterPlot 容器组件中。

知道什么是正确的方法吗？

这是一个代码示例：

import React, { useState } from "react";
import classes from "./ScatterPlot.module.css";
import Chart from "react-google-charts";

const ScatterPlot = props => {
  const [x1, setX1] = useState(0);
  const [x2, setX2] = useState(0);
  const [y1, setY1] = useState(0);
  const [y2, setY2] = useState(0);
  const [x3, setX3] = useState(0);
  const [x4, setX4] = useState(0);
  const [y3, setY3] = useState(0);
  const [y4, setY4] = useState(0);
  const [selectDivStyle, setSelectDivStyle] = useState({
    left: "0px",
    top: "0px",
    width: "0px",
    height: "0px"
  });
  const { data } = props;

  const reCalcSelectBox = () => {
    setX3(Math.min(x1, x2));
    setX4(Math.max(x1, x2));
    setY3(Math.min(y1, y2));
    setY4(Math.max(y1, y2));
    const styleLeft = x3 + "px";
    const styleTop = y3 + "px";
    const styleWidth = x4 - x3 + "px";
    const styleHeight = y4 - y3 + "px";
    setSelectDivStyle({
      left: styleLeft,
      top: styleTop,
      width: styleWidth,
      height: styleHeight
    });
  };

  let hideSelect = true;
  const mouseDownOnChart = e => {
    hideSelect = false;
    setX1(e.pageX);
    setY1(e.pageY);
    reCalcSelectBox();
  };

  const mouseMoveOnChart = e => {
    setX2(e.pageX);
    setY2(e.pageY);
    reCalcSelectBox();
  };

  const mouseUpOnChart = e => {
    hideSelect = true;
    // selectPoints();
  };

  const selectPoints = () => {
    // Not yet implemented
  };

  const selectBoxClasses = [classes.selectDivContainer];

  if (hideSelect) {
    selectBoxClasses.push(classes.hidden);
  }

  return (
    <div
      onMouseDown={mouseDownOnChart}
      onMouseUp={mouseUpOnChart}
      onMouseMove={mouseMoveOnChart}
      className={selectBoxClasses}
    >
      <div className={classes.selectDiv} style={selectDivStyle} />
      <div className={classes.scatterPlotContainer}>
        <Chart
          width={"100%"}
          height={"100%"}
          chartType="ComboChart"
          data={data}
          rootProps={{ "data-testid": "1" }}
        />
      </div>
    </div>
  );
};

export default ScatterPlot;

Answer 1

使用 React.memo 这有助于防止不必要的重新渲染。

需要select react中点的范围google 鼠标拖动散点图

Need to select the range of points in react google scatter chart by dragging the mouse

reactjs

react-google-charts