Блог

У меня есть линейная диаграмма и ряд Visx, которые содержат нулевые точки данных.

Я могу установить значение 0, если найдено значение 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) => {
      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;
    }}
  />
 

But I would like to interpolate values between points instead, to show a continuing line. For instance the green line between red line shown here:

In HighCharts, this would be equivalent to setting «connectNulls» to true, https://api.highcharts.com/highcharts/plotOptions.series.connectNulls.

How can this be done in Visx? which uses d3 under the hood.

Perhaps this is a feature of Visx (or d3), or perhaps there’s a third-party «linear interpolation» library that I can run over y values:

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