求助：使用Nivo库实现按数值阈值分色的平滑折线图异常问题

Hi 👋，看了你的问题和代码，我发现两个核心问题导致了当前的异常：

1. 自定义的CustomLineLayer用直线段(<line>)连接点，完全忽略了你设置的curve="natural"平滑曲线配置，所以折线看起来不光滑；
2. 线段颜色只取了每个线段起点的y值，完全没考虑线段跨阈值的情况（比如起点y=50是绿色，终点y=70是黄色，你整个线段都用了绿色，这就不符合预期了）。

下面给你两个可行的解决方案，按需选择：

方案一：拆分数据为多系列（推荐，利用Nivo原生能力） #

思路是把原数据按阈值拆分成三个独立的系列（绿色、黄色、红色），并且处理跨阈值的点，在阈值位置插入插值点，保证曲线连贯平滑。

修改后的代码如下：

import { ResponsiveLine } from "@nivo/line";

const originalData = [
  { x: "12 AM", y: 40 },
  { x: "1 AM", y: 50 },
  { x: "2 AM", y: 70 },
  { x: "3 AM", y: 75 },
  { x: "4 AM", y: 90 },
  { x: "5 AM", y: 85 },
  { x: "6 AM", y: 65 },
  { x: "7 AM", y: 60 },
  { x: "8 AM", y: 50 },
  { x: "9 AM", y: 70 },
  { x: "10 AM", y: 90 },
  { x: "11 AM", y: 50 },
  { x: "12 PM", y: 30 },
];

// 拆分数据并处理跨阈值插值
const splitDataByThreshold = () => {
  const greenData = [];
  const yellowData = [];
  const redData = [];
  const thresholds = [60, 80];

  for (let i = 0; i < originalData.length; i++) {
    const current = originalData[i];
    const next = originalData[i + 1];

    // 先把当前点加入对应系列
    if (current.y <= 60) greenData.push(current);
    else if (current.y <= 80) yellowData.push(current);
    else redData.push(current);

    // 处理跨阈值的情况，插入插值点
    if (!next) continue;
    const currentRange = getRange(current.y);
    const nextRange = getRange(next.y);

    if (currentRange !== nextRange) {
      // 计算需要插入的阈值
      const threshold = currentRange < nextRange ? thresholds[currentRange - 1] : thresholds[nextRange - 1];
      // 线性插值计算x的位置（这里简化处理，实际可根据时间精度调整）
      const hour = parseInt(current.x.split(' ')[0]);
      const period = current.x.split(' ')[1];
      const interpolatedX = `${hour + 1} ${period}`;
      const interpolatedPoint = {
        x: interpolatedX,
        y: threshold,
      };
      // 把插值点加入两个系列，保证曲线连贯
      if (currentRange === 1) greenData.push(interpolatedPoint);
      else if (currentRange === 2) yellowData.push(interpolatedPoint);
      else redData.push(interpolatedPoint);

      if (nextRange === 1) greenData.push(interpolatedPoint);
      else if (nextRange === 2) yellowData.push(interpolatedPoint);
      else redData.push(interpolatedPoint);
    }
  }

  // 返回Nivo需要的格式
  return [
    { id: "green", data: greenData, color: "green" },
    { id: "yellow", data: yellowData, color: "yellow" },
    { id: "red", data: redData, color: "red" },
  ];

  // 辅助函数：判断值属于哪个区间（1=绿，2=黄，3=红）
  function getRange(value: number) {
    if (value <= 60) return 1;
    if (value <= 80) return 2;
    return 3;
  }
};

export const MyResponsiveLineChart = () => {
  const lineData = splitDataByThreshold();

  return (
    <ResponsiveLine
      data={lineData}
      margin={{ top: 50, right: 50, bottom: 50, left: 50 }}
      xScale={{ type: "point" }}
      yScale={{
        type: "linear",
        min: 0,
        max: 100,
      }}
      layers={["grid", "markers", "axes", "lines", "points"]}
      gridYValues={[60, 80, 100]}
      lineWidth={3}
      yFormat=" >-.2f"
      axisTop={null}
      axisRight={null}
      theme={{
        fontSize: 14,
        grid: {
          line: {
            strokeDasharray: "6 6",
          },
        },
      }}
      axisBottom={{
        tickSize: 5,
        tickPadding: 10,
        tickRotation: 0,
      }}
      axisLeft={{
        tickSize: 0,
        tickPadding: 10,
        tickRotation: 0,
      }}
      enableGridX={false}
      enableGridY={true}
      curve="natural"
      animate={true}
    />
  );
};

这个方案的优点是完全利用Nivo的原生曲线渲染，不需要自己写复杂的SVG路径，颜色和曲线都会符合预期。

方案二：自定义平滑曲线层并处理颜色分段 #

如果你坚持要使用自定义层，可以利用D3的曲线生成器来绘制平滑路径，并且对路径进行分段着色。这里需要注意，平滑曲线的颜色处理会更复杂，因为曲线是连续的路径，需要根据y值的变化来设置渐变或者拆分路径段。

简化版的自定义层代码示例：

import { ResponsiveLine } from "@nivo/line";
import { line, curveNatural } from "d3-shape";

const lineData = [
  {
    id: "linechart",
    data: [
      { x: "12 AM", y: 40 },
      { x: "1 AM", y: 50 },
      { x: "2 AM", y: 70 },
      { x: "3 AM", y: 75 },
      { x: "4 AM", y: 90 },
      { x: "5 AM", y: 85 },
      { x: "6 AM", y: 65 },
      { x: "7 AM", y: 60 },
      { x: "8 AM", y: 50 },
      { x: "9 AM", y: 70 },
      { x: "10 AM", y: 90 },
      { x: "11 AM", y: 50 },
      { x: "12 PM", y: 30 },
    ],
  },
];

const getColorForValue = (value: number) => {
  if (value <= 60) return "green";
  if (value <= 80) return "yellow";
  return "red";
};

const CustomSmoothLineLayer = ({ data, xScale, yScale }: any) => {
  return data.map((dataSeries: any, lineIndex: any) => {
    // 用D3生成自然曲线的路径
    const lineGenerator = line()
      .x((d: any) => xScale(d.x))
      .y((d: any) => yScale(d.y))
      .curve(curveNatural);

    const pathString = lineGenerator(dataSeries.data);

    // 用线性渐变模拟分段颜色
    const gradientId = `line-gradient-${lineIndex}`;

    return (
      <g key={`line-${lineIndex}`}>
        <defs>
          <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
            {dataSeries.data.map((point: any, i: any) => {
              const offset = `${(i / (dataSeries.data.length - 1)) * 100}%`;
              return <stop key={i} offset={offset} stopColor={getColorForValue(point.y)} />;
            })}
          </linearGradient>
        </defs>
        <path
          d={pathString}
          stroke={`url(#${gradientId})`}
          strokeWidth={3}
          fill="none"
        />
      </g>
    );
  });
};

export const MyResponsiveLineChart = () => (
  <ResponsiveLine
    data={lineData}
    margin={{ top: 50, right: 50, bottom: 50, left: 50 }}
    xScale={{ type: "point" }}
    yScale={{
      type: "linear",
      min: 0,
      max: 100,
    }}
    layers={["grid", "markers", "axes", CustomSmoothLineLayer]}
    gridYValues={[60, 80, 100]}
    lineWidth={3}
    yFormat=" >-.2f"
    axisTop={null}
    axisRight={null}
    theme={{
      fontSize: 14,
      grid: {
        line: {
          strokeDasharray: "6 6",
        },
      },
    }}
    axisBottom={{
      tickSize: 5,
      tickPadding: 10,
      tickRotation: 0,
    }}
    axisLeft={{
      tickSize: 0,
      tickPadding: 10,
      tickRotation: 0,
    }}
    enableGridX={false}
    enableGridY={true}
    curve="natural"
    animate={true}
  />
);

这个方案用渐变来模拟分段颜色，视觉上接近预期，但如果需要精确的颜色分界（比如在y=60的位置突然变绿转黄），还需要更复杂的路径拆分逻辑。

你可以先试试方案一，它的实现更简单，也完全符合你的需求~

备注：内容来源于stack exchange，提问作者Limbaji Thorat