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

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

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

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

我一定很想念东西。我有一个x轴和一个y轴。如何将这些域中的值映射到图表上的位置？

解决方法

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

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} />