如何让D3曲线忽略缺失值而非默认设为0？

要实现忽略缺失目标属性的数据点、绘制连续折线的需求，核心思路是提前过滤掉缺失目标属性的数据集条目，而非依赖line.defined()方法。具体实现步骤如下：

1. 预处理数据：过滤无效条目 #

遍历原始数据，剔除目标属性（如示例中的a）缺失（null/undefined/NaN）的记录，仅保留有效数据点：

// 过滤出a属性存在且有效的数据条目
const filteredData = data.filter(d => d.a != null && !isNaN(d.a));

• 若缺失值仅为null或undefined，可简化判断为d.a != null；
• 若缺失值包含NaN，则需补充!isNaN(d.a)的校验。

2. 用过滤后的数据绘制连续折线 #

使用过滤后的数据集生成折线，此时传入line生成器的所有点都是连续的有效数据，自然会生成无分段的连续曲线：

const line = d3.line()
    .x(d => xScale(d.when))
    .y(d => yScale(d.a))
    .curve(d3.curveMonotoneX);

g.append('path')
    .attr('d', line(filteredData))
    .attr('fill', 'none')
    .attr('stroke', orange);

为什么line.defined()会生成多段折线？ #

line.defined()的作用是标记单个数据点是否有效，但当遇到无效点时，D3路径生成器会插入M（移动）指令，跳过无效点后从下一个有效点重新开始绘制，这就导致了折线分段。而提前过滤数据相当于直接移除了无效点，让生成器处理的是连续的有效序列，因此不会出现分段问题。

多属性折线的处理 #

如果需要同时绘制a和b两组折线，只需分别过滤对应属性的数据集即可：

// 过滤b属性的有效数据
const filteredDataForB = data.filter(d => d.b != null && !isNaN(d.b));

const lineB = d3.line()
    .x(d => xScale(d.when))
    .y(d => yScale(d.b))
    .curve(d3.curveMonotoneX);

g.append('path')
    .attr('d', lineB(filteredDataForB))
    .attr('fill', 'none')
    .attr('stroke', blue);

内容的提问来源于stack exchange，提问作者Florent Georges