visx使用Threshold组件填充两折线间区域时属性配置错误问题

问题背景 #

基于visx搭建双折线图时，需要实现两条折线之间的区域颜色填充效果。尝试使用Threshold组件实现该需求时出现props属性配置错误，需获取正确实现方案。

预期效果 #

问题复现 #

问题复现沙箱地址

实现方案 #

方案1：使用Area组件实现单色填充（最简单，适配无分色需求场景） #

不需要使用Threshold组件，直接引入@visx/shape中的Area组件，分别指定上下边界对应两条折线的坐标即可，核心代码如下：

import { Area, LinePath } from '@visx/shape';

// 提前定义好x轴、y轴比例尺，示例数据格式为：
// const chartData = [{ x: 横坐标值, upperY: 上折线值, lowerY: 下折线值 }, ...]
// const xScale = scaleTime(...) / scaleLinear(...)
// const yScale = scaleLinear(...)

<svg width={chartWidth} height={chartHeight}>
  {/* 先渲染填充区域，层级在折线下方 */}
  <Area
    data={chartData}
    x={d => xScale(d.x)}
    y0={d => yScale(d.lowerY)} // 下边界对应下方折线的像素坐标
    y1={d => yScale(d.upperY)} // 上边界对应上方折线的像素坐标
    fill="#1677ff"
    fillOpacity={0.15}
  />
  {/* 再渲染两条折线，保证折线显示在填充层上方 */}
  <LinePath
    data={chartData}
    x={d => xScale(d.x)}
    y={d => yScale(d.upperY)}
    stroke="#1677ff"
    strokeWidth={2}
  />
  <LinePath
    data={chartData}
    x={d => xScale(d.x)}
    y={d => yScale(d.lowerY)}
    stroke="#52c41a"
    strokeWidth={2}
  />
</svg>

方案2：正确配置Threshold组件实现交叉分色填充 #

如果需要实现两条折线交叉时，不同上下关系区域显示不同填充色（和参考图效果一致），可以使用Threshold组件，之前props报错基本是版本不匹配、或者y0/y1未返回像素坐标导致的，正确配置代码如下：

import { Threshold } from '@visx/threshold';
import { LinePath } from '@visx/shape';

// 提前定义好比例尺、数据，和方案1一致
<svg width={chartWidth} height={chartHeight}>
  <Threshold
    data={chartData}
    x={d => xScale(d.x)}
    y0={d => yScale(d.upperY)} // 传入第一条折线的像素坐标
    y1={d => yScale(d.lowerY)} // 传入第二条折线的像素坐标
    // 上折线在上方时的填充样式
    aboveAreaProps={{
      fill: "#1677ff",
      fillOpacity: 0.15
    }}
    // 下折线在上方时的填充样式
    belowAreaProps={{
      fill: "#52c41a",
      fillOpacity: 0.15
    }}
  />
  {/* 同样叠加渲染两条折线即可 */}
  <LinePath
    data={chartData}
    x={d => xScale(d.x)}
    y={d => yScale(d.upperY)}
    stroke="#1677ff"
    strokeWidth={2}
  />
  <LinePath
    data={chartData}
    x={d => xScale(d.x)}
    y={d => yScale(d.lowerY)}
    stroke="#52c41a"
    strokeWidth={2}
  />
</svg>

配置注意点：

• @visx/threshold为独立依赖包，需要单独安装，且版本要和项目中其他visx依赖版本保持一致，否则会出现props不兼容报错
• y0/y1/x属性必须返回经比例尺转换后的像素坐标值，不能直接传入原始数据值

内容的提问来源于stack exchange，提问作者Aika Sat