d3.js - 空数据点的 Visx Linepath（d3 曲线）线性插值

Question

我有一个包含空数据点的 Visx 折线图和系列。

如果找到 null，我可以将值设置为 0，从而呈现如下图表：

<LinePath
    curve={curveLinear}
    data={[0.55, 1, null, null, 0.8, 1, 1, null, 2, 2.2]}
    x={(d, idx) => xScale(idx)}
    y={(d, idx, s) => {
      if (d === null) {
        return y0Scale(0);
      }
      return y0Scale(d);
    }}
  />

或者，如果找到 null，我可以换行，呈现如下图表：

<LinePath
    curve={curveLinear}
    data={[0.55, 1, null, null, 0.8, 1, 1, null, 2, 2.2]}
    x={(d, idx) => xScale(idx)}
    y={(d, idx, s) => {
      return y0Scale(d);
    }}
    defined={(a) => {
      return a !== null;
    }}
  />

但我想在点之间插入值，以显示一条连续的线。例如此处显示的红线之间的绿线：

在 HighCharts 中，这相当于将“connectNulls”设置为 true，https: //api.highcharts.com/highcharts/plotOptions.series.connectNulls 。

在 Visx 中如何做到这一点？它在引擎盖下使用 d3。

也许这是 Visx（或 d3）的一个特性，或者我可以在 y 值上运行第三方“线性插值”库：

y={(d, idx, s) => {
  if (d == null) {
    return y0Scale(interpolateY(s, idx, s))
  }
  return y0Scale(d);
}}

标签： d3.jsvisx