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

Question

CartesianGrid 允许我设置要显示的 verticalPoints 和 horizontalPoints。

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

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

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]);

然后假设我们有一个垂直点数组：

const verticalPoints: number[] = [];

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

verticalPoints.push(xScale(value))

我们可以像这样使用 CartesianGrid 在 x-axis 上渲染垂直线：

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

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

How can I calculate lines for a custom CartesianGrid in Rechart. How can I remap to the correct domain

recharts