reactjs - Nivo 折线图自定义网格层

Question

我有这样的差距 的 nivo 折线图：通过y/value: null在数据系列中传入 11 月和 12 月来弥补差距

工具提示仅显示在数据点上，这是正确的，但我想在 11 月和 12 月添加工具提示，并解释为什么没有数据。

Answer 1

解决方案是添加自定义图层“网格”，该图层负责在折线图上显示工具提示。

1. 您必须在 <ResponsiveLine 组件中声明自定义层：

     layers={[
         'grid',
         'markers',
         'axes',
         'areas',
         'crosshair',
         'lines',
         'slices',
         'points',
         CustomMesh,
         'legends',
       ]}
   

2. 创建 CustomMesh 组件：

   const CustomMesh = (layerData: any) => {
   const { showTooltipAt, hideTooltip } = useTooltip();
   
   const handleMouseEnter = (point: any) => {
     showTooltipAt(
       layerData.tooltip({ point }),
       [point.x + layerData.margin.left, point.y + layerData.margin.top],
       'top'
     );
   };
   const handleMouseMove = (point: any) => {
     showTooltipAt(
       layerData.tooltip({ point }),
       [point.x + layerData.margin.left, point.y + layerData.margin.top],
       'top'
     );
   };
   const handleMouseLeave = (point: any) => {
     hideTooltip();
   };
   const nullValuePoints = layerData.series.reduce((acc: any[], cur: any) => {
       cur.data.forEach(({ data, position }: any) => {
     if (data.y === null) {
       const point = {
         x: position.x,
         y: 100, //whatever you want
         data: {
           x: data.x,
         },
       };
       acc.push(point);
     }
   });
       return acc;
     }, []);
   return (
     <Mesh
       nodes={[...layerData.points, ...nullValuePoints]}
       width={layerData.width}
       height={layerData.height}
       onMouseEnter={handleMouseEnter}
       onMouseMove={handleMouseMove}
       onMouseLeave={handleMouseLeave}
       debug={layerData.debugMesh}
     />
   );
   };
   

我nullValuePoints的自定义点什么时候没有数据

3. 导入所需的包：

import { Mesh } from '@nivo/voronoi';
import { useTooltip } from '@nivo/tooltip';

结果：