d3.js - Recharts - 如何保留 Y 轴的边缘值？

Question

我有一个正确显示数据的图表，但我的 Y 轴是线性的（应该是）并且它会裁剪数据（见屏幕截图）。

我希望 Y 轴显示线性数据并尊重图表的边缘（最大值）值。

我试图使用 d3-scale 但我失败了 - 不知道如何将最大值“附加”到规模。我想的唯一方法是手动计算我想避免的所有刻度。

我的 Y 轴代码是

<YAxis
  domain={[data.yAxis.min, data.yAxis.max]}
  scale="linear"
  tickFormatter={formatEnergyAxis}
/>

哪里min是0和max是 3200（单位转换发生在格式化程序中）。

有没有办法调整比例？

标签： d3.jsrecharts

Answer 1

在您的 Y 轴上，您可以将最后一个刻度指定为可见，并将 propsinterval设置为preserveEnd，如下所示：

<YAxis
  domain={[data.yAxis.min, data.yAxis.max]}
  scale="linear"
  tickFormatter={formatEnergyAxis}
  interval="preserveEnd"
/>

您还可以使用该值preserveStartEnd使根和边缘值可见。