Recharts 方形缩放实现答案

【问题标题】：Recharts square zoom implementationRecharts 方形缩放实现
【发布时间】：2022-08-05 20:25:40
【问题描述】：

我正在谈论的样本在这里

https://recharts.org/en-US/examples/HighlightAndZoomLineChart 和这里 https://codesandbox.io/s/highlight-zomm-line-chart-v77bt

请按下鼠标左键并将其拖动到右侧 - 这是当前完成缩放的方式。请查看activeLabel 变量。

目前，recharts 可以通过传递 x 坐标（存储在 activeLabel 变量中）来放大图形，并且 zoom 看起来像整个 y 坐标上的柱子。

我想选择一个区域 - 正方形或矩形来进行更多自定义缩放。问题是我无法获得图形的 y 值（不是窗口中的像素）。 Recharts 仅给出图形的 x 坐标，但不给出 y。

我已经在 gitHub 上搜索了所有问题，但没有运气就给创建者发了邮件。

我读过 Recharts value at pointer to show in tooltip?

但我不知道如何计算我的响应容器中chartX 和chartY 的初始值，所以它很大程度上取决于用户拥有的窗口。

请帮助我找到一个解决方案，根据我使用的响应容器，将像素中的 chartY 与我的图表中的实际值相匹配。

好像找到了。。。稍后再发

标签： recharts

【解决方案1】：

缩放可以通过使用图表的鼠标事件来完成。

您可以将值存储在状态中，然后在 onMouseUp 上调用缩放功能。在缩放功能中，您可以设置轴的域。不要忘记将坐标轴设置为allowDataOverflow。您还可以使用ReferenceArea 绘制矩形

function zoom () {
    setXAxisBoundaries([rectangle[0], rectangle[1]])
    setYAxisBoundaries([rectangle[2], rectangle[3]])
}

<ScatterChart
    onMouseDown={(event) => setRectangle([event.xValue, event.yValue])}
    onMouseMove={(event) => setRectangle(rectangle => [...rectangle, event.xValue, event.yValue]))}
    onMouseUp={zoom}>

<XAxis
    dataKey="x"
    allowDataOverflow
    domain={xAxisBoundaries}
    type="number" />
<YAxis
    dataKey="y"
    allowDataOverflow
    domain={yAxisBoundaries}
    type="number" />

【讨论】：