recharts - Recharts 放大挂钩

Question

我一直在尝试重写 recharts 的代码以放大钩子组件而不是类，但我一直有错误。有人可以告诉我我做错了什么或帮助我修复我的代码吗？错误。_ 这是来自 recharts 示例的原始版本这就是我所做的：

import {
 Label,
 LineChart,
 Line,
 CartesianGrid,
 XAxis,
 YAxis,
 Tooltip,
 ReferenceArea,
} from "recharts";

const data = [
 { name: 1, cost: 4.11, impression: 100 },
 { name: 2, cost: 2.39, impression: 120 },
 { name: 3, cost: 1.37, impression: 150 },
 { name: 4, cost: 1.16, impression: 180 },
 { name: 5, cost: 2.29, impression: 200 },
 { name: 6, cost: 3, impression: 499 },
 { name: 7, cost: 0.53, impression: 50 },
 { name: 8, cost: 2.52, impression: 100 },
 { name: 9, cost: 1.79, impression: 200 },
 { name: 10, cost: 2.94, impression: 222 },
 { name: 11, cost: 4.3, impression: 210 },
 { name: 12, cost: 4.41, impression: 300 },
 { name: 13, cost: 2.1, impression: 50 },
 { name: 14, cost: 8, impression: 190 },
 { name: 15, cost: 0, impression: 300 },
 { name: 16, cost: 9, impression: 400 },
 { name: 17, cost: 3, impression: 200 },
 { name: 18, cost: 2, impression: 50 },
 { name: 19, cost: 3, impression: 100 },
 { name: 20, cost: 7, impression: 100 },
];

const ZoomIn = () => {


 const [data, setData] = useState({});
 const [left, setLeft] = useState("dataMin");
 const [right, setRight] = useState("dataMax");
 const [top, setTop] = useState("dataMax+1");
 const [bottom, setBottom] = useState("dataMin-1");
 const [top2, setTop2] = useState("dataMax+20");
 const [bottom2, setBottom2] = useState("dataMin-20");
 const [animation, setAnimation] = useState(true);
 const [refAreaLeft, setRefAreaLeft] = useState("");
 const [refAreaRight, setRefAreaRight] = useState("");
 const getAxisYDomain = (from, to, ref, offset) => {
   ////
   const refData = data.slice(from - 1, to);
   let [bottom, top] = [refData[0][ref], refData[0][ref]];
   refData.forEach((d) => {
     if (d[ref] > top) top = d[ref];
     if (d[ref] < bottom) bottom = d[ref];
   });

   return [(bottom | 0) - offset, (top | 0) + offset];
 };

 

 const zoom = () => {
   let refAreaLeft = refAreaLeft;
   let refAreaRight = refAreaRight;
   let data = data;

   if (refAreaLeft === refAreaRight || refAreaRight === "") {
     setRefAreaLeft("");
     setRefAreaRight("");
     return;
   }

   // xAxis domain
   if (refAreaLeft > refAreaRight) {
     setRefAreaLeft(refAreaRight);
     setRefAreaRight(refAreaLeft);
   }

   // yAxis domain
   const [bottom, top] = getAxisYDomain(refAreaLeft, refAreaRight, "cost", 1);
   const [bottom2, top2] = getAxisYDomain(
     refAreaLeft,
     refAreaRight,
     "impression",
     50
   );

   setRefAreaLeft("");
   setRefAreaRight("");
   setData(data.slice());
   setLeft(refAreaLeft);
   setRight(refAreaRight);

  
 };


 const zoomOut = () => {
   var data = data;
   setData(data.slice);
   setRefAreaLeft("");
   setRefAreaRight("");
   setLeft("dataMin");
   setRight("dataMax");
   setTop("dataMax+1");
   setBottom("dataMin");
   setTop2("dataMax+50");
   setBottom2("dataMin+50");
 };


 return (
   <div className="highlight-bar-charts" style={{ userSelect: "none" }}>
     <button

       className="btn update"
       onClick={zoomOut}
     >
       Zoom Out
     </button>

     <LineChart
       width={800}
       height={400}
       data={data}
       onMouseDown={(e) => {
         setRefAreaLeft(e.activeLabel);
       }}
       onMouseMove={(e) => {
         setRefAreaRight(e.activeLabel);
       }}
  
       onMouseUp={zoom}
     >
       <CartesianGrid strokeDasharray="3 3" />
       <XAxis
         allowDataOverflow
         dataKey="name"
         domain={[left, right]}
         type="number"
       />
       <YAxis
         allowDataOverflow
         domain={[bottom, top]}
         type="number"
         yAxisId="1"
       />
       <YAxis
         orientation="right"
         allowDataOverflow
         domain={[bottom2, top2]}
         type="number"
         yAxisId="2"
       />
       <Tooltip />
       <Line
         yAxisId="1"
         type="natural"
         dataKey="cost"
         stroke="#8884d8"
         animationDuration={300}
       />
       <Line
         yAxisId="2"
         type="natural"
         dataKey="impression"
         stroke="#82ca9d"
         animationDuration={300}
       />

       {refAreaLeft && refAreaRight ? (
         <ReferenceArea
           yAxisId="1"
           x1={refAreaLeft}
           x2={refAreaRight}
           strokeOpacity={0.3}
         />
       ) : null}
     </LineChart>
   </div>
 );
};

export default ZoomIn;

标签： recharts

Answer 1

尝试使用另一个变量名

let _refAreaLeft = refAreaLeft;