Javascript D3线图零值红线

我使用D3来呈现一个基本的折线图，这是工作良好

问题是，当值为

0

时，我想画一条红线，但是它并没有像预期的那样工作。下面是我所说的示例（请注意蓝线和红线-当值不是

0

时，红线应该停止。您可以忽略垂直线）：

下面是我用来渲染线条的代码：

这将呈现蓝线：

svg
  .append('svg:path')
  .attr('class', 'line' + i)
  .attr('d', () => lineGen(d.values))
  .attr('stroke', () => d.values[0].color)
  .attr('stroke-width', 4)
  .attr('fill', 'none');

这将显示红线：

svg
  .append('svg:path')
  .attr('class', 'line' + i)
  .attr('d', () => lineGen(d.values.filter((item: any) => item.value === 0)))
  .attr('stroke', '#ff0053')
  .attr('stroke-width', 4)
  .attr('fill', 'none');

以及

lineGen

功能：

const lineGen: Line<[number, number]> = d3
  .line()
  .x(d => xScale(d[objX]))
  .y(d => yScale(d[objY]));

const lineGen:Line=d3
.第（）行
.x（d=>xScale（d[objX]））
.y（d=>yScale（d[objY]）；

---

当值不为零时，如何防止绘制红线？

能否为此创建一个JSIDLE？能否为此创建一个JSIDLE？