React.Js - rechart zoom IN/OUT和Brush问题

Question

我正在使用Rechart库并使用AreaChartFillByValue.我现在面临以下问题

1)当我在图表中放大而来的x轴外,当我缩小它只是恢复到它开始例如:假设目前的出发点是1到15,但实际的数据是30时我放大它在x轴上显示5到10的值,当我缩放时它取回1到15的值.我想它应该放大直到整个数据显示从1到30.

2)当我放大画笔时应缩小并显示滤镜的起点和终点,例如:假设当前起点为1到15,当我放大时它在x轴上显示5到10的值,但刷子仍显示1到15的值.

3)我无法在放大图表时拖动图表.我可以拖动画笔并更新图表显示但不能从图表中执行.

4)使用画笔时,颜色分割不起作用.绿色和负值的正值显示为红色.但它没有正确地采取中间价值.我按照官方教程链接使用刷子给出了同样的问题.

我尝试了互联网上提供的所有示例,但无法找到放大和刷子的解决方案.如果有人能解决这个问题,那就太好了.由于GITHUB中没有类似的未解决问题

为了更清楚,请参阅以下两个预期图像.
我的输出 我的代码:stackblitz编辑器 预期输出

示例上面图像的链接

示例上面图像的链接