recharts - 如何在 Rechart 中计算自定义 CartesianGrid 的线条。如何重新映射到正确的域

Question

CartesianGrid 允许我设置要显示的verticalPoints 和horizo​​ntalPoints。

不幸的是，这些值是图表上的像素值，而不是 x 和 y 域的坐标。

我肯定错过了什么。我有一个 x 轴和一个 y 轴。如何将这些域中的值映射到图表上的位置？

标签： recharts

Answer 1

因此，给定一些定义图表的常量：

const chartWidth = 600;      // width set on our chart object

const xAxisLeftMargin = 10;  // margins set on our chart object
const xAxisRightMargin = 20;
const xPadding = 0;          // padding set on both sides of xAxis

const yAxisWidth = 120;      // total widths of all yAxes

我们可以使用 d3 创建一个 xScale，如下所示：

const leftX = 0 + yAxisWidth + xAxisLeftMargin + xPadding;
const rightX = chartWidth - xPadding - xAxisRightMargin;
// note that rightX assumes there are no axes on the right hand side

const xScale = d3.scaleLinear().domain(xDomain).range([leftX, rightX]);

然后假设我们有一个verticalPoints数组：

const verticalPoints: number[] = [];

我们只需像这样在 xDomain 中添加值：

verticalPoints.push(xScale(value))

我们可以使用 CartesianGrid 在 x 轴上渲染我们的垂直线，如下所示：

<CartesianGrid stroke="#d5d5d5" verticalPoints={verticalPoints} />