D3.js多线图聚焦/上下文窗口刷选报错：路径d属性NaN问题求助

看起来你遇到的Error: attribute d: Expected number问题，核心原因是聚焦图的线条生成器拿到了包含NaN的数据，导致无法生成有效的SVG路径。我帮你梳理几个关键排查和修复步骤：

1. 先检查原始数据的有效性 #

这个NaN大概率是从data.csv里带进来的——比如数值列有空值、非数字内容，或者日期格式解析失败。你可以在加载数据时做强制转换和过滤：

d3.csv("data.csv").then(function(rawData) {
  // 把数值字段转成数字，日期字段转成Date对象
  const cleanedData = rawData.map(d => ({
    date: new Date(d.date), // 假设你的x轴是日期
    value: +d.value, // +号会把空值/非数字转成NaN
    category: d.category // 如果有多组数据的分组字段
  })).filter(d => {
    // 过滤掉无效数据：value不是数字，或者日期解析失败
    return !isNaN(d.value) && !isNaN(d.date.getTime());
  });

  // 后续的图表初始化逻辑用cleanedData
});

2. 验证刷选后的数据过滤逻辑 #

刷选功能会根据上下文图的范围过滤数据给聚焦图，如果过滤后的d.values里有超出聚焦图比例尺范围的点，或者空数据组，就会生成NaN路径。你可以在出错的代码前加日志排查：

focus.selectAll("path.line").attr("d", function(d) {
  // 打印当前分组的刷选后数据，检查有没有NaN或空数组
  console.log("当前分组数据:", d.values);
  // 手动过滤出在聚焦图x轴范围内的点
  const validPoints = d.values.filter(point => {
    const [xMin, xMax] = x.domain();
    return xMin <= point.date && point.date <= xMax;
  });
  // 如果没有有效点，返回null避免绘制无效路径
  return validPoints.length ? line(validPoints) : null;
});

3. 确保比例尺动态更新正确 #

聚焦图的x比例尺必须严格跟随刷选范围更新，否则数据点的坐标计算会出错。检查你的刷选回调函数：

function brushed() {
  const selection = d3.event.selection || x2.range();
  // 把上下文图的像素范围转成数据域范围
  const xDomain = selection.map(x2.invert, x2);
  // 更新聚焦图的x比例尺定义域
  x.domain(xDomain);
  
  // 重新绘制坐标轴和线条
  focus.select(".axis--x").call(xAxis);
  focus.selectAll("path.line").attr("d", function(d) {
    const validPoints = d.values.filter(p => x.domain()[0] <= p.date && p.date <= x.domain()[1]);
    return validPoints.length ? line(validPoints) : null;
  });
}

4. 处理空数据分组 #

如果某个分组在当前刷选范围内没有数据，直接返回null让D3跳过这条线的绘制，避免生成包含NaN的路径。

按照这个思路排查，应该能解决聚焦图线条不显示的问题——本质就是把所有可能产生NaN的环节（原始数据、过滤逻辑、比例尺映射）都堵上。

内容的提问来源于stack exchange，提问作者Mario Grebelski