在 reCharts、React 中不要悬停在多个图层下的点上

Question

我正在研究 reCharts，我面临图表中的一个错误，表面有多个区域和多个点悬停，但我无法悬停在某些点上。

我正在使用的代码：

case ChartTypes.Area: { const {mode, dotColorFormat, stackId, lineWidth, lineType, dotSize, connectNulls} = chart; const dataKeySuffix = mode === 'stacked100Percent' ? 'percent' : 'value'; const colorFormat = dotColorFormat ? getFormatter(dotColorFormat) : undefined; const dataKey =

${valueKey}.${dataKeySuffix}`; const valueAccessor = getLabelValueAccessor({valueKey});

    return (
      <Area
        key={`area-${seriesIx}`}
        name={label}
        dataKey={dataKey}
        stackId={stackId}
        fill={color}
        stroke={color}
        strokeWidth={lineWidth}
        type={lineType}
        activeDot={
          !hideActiveDots && (
            <CustomizedDot
              r={dotSize}
              colorFormat={colorFormat}
              active={true}
              cursor={this.getCursor}
              seriesIx={seriesIx}
              onCustomizedMouseOver={setSeries}
              onMouseOut={setTooltipInactive}
              z-index="222"
              index={222}
            />
        
          )
        }
        dot={!hideDots &&  <CustomizedDot r={dotSize} colorFormat={colorFormat} index={222} z-index="2"/> }
        connectNulls={connectNulls}
        xAxisId={xAxisId}
        yAxisId={yAxisId}
        isAnimationActive={animationActive}
        onAnimationStart={onAnimationStart}
        onAnimationEnd={onAnimationEnd}
      >
        <Layer>
        {showSignificance && (
          <LabelList dataKey={valueAccessor} content={<CustomizedAreaLabel dotSize={dotSize} />} />
        )}
        </Layer>
      </Area>
    );
  }`

我尝试为 customisedDot 组件提供索引，但这没有帮助，我想让它悬停在每个点上，任何建议都会有帮助。

谢谢