D3.js折线图报错：<path>属性d期望数值，出现NaN值

嘿，这个NaN报错我之前做D3折线图的时候也踩过坑！你推测的方向完全正确——就是X轴的字符串类型数据没有被正确转换为D3能用于计算坐标的数值类型，虽然轴的显示顺序看起来正常，但绘制折线路径时，D3没法把字符串解析成有效的坐标值，就抛出了这个错误。

下面根据你的X轴数据类型，给你两种针对性的解决方案：

情况1：X轴是有序分类字符串（比如"周一"/"周二"、"V1"/"V2"这类） #

如果你用了线性尺度（d3.scale.linear()）来处理分类字符串，肯定会得到NaN。正确的做法是改用序数尺度（ordinal scale），它专门用来处理离散的分类数据：

// 第一步：提取所有X轴的分类值
var xCategories = yourData.map(function(d) { return d.xField; });

// 第二步：创建序数尺度，把分类映射到坐标区间
var xScale = d3.scale.ordinal()
    .domain(xCategories) // 传入所有分类值，保证顺序
    .rangePoints([0, chartWidth]); // 用rangePoints生成均匀分布的点坐标，也可以用rangeBands根据需求调整

// 第三步：在折线生成器里使用这个尺度
var lineGenerator = d3.svg.line()
    .x(function(d) { return xScale(d.xField); }) // 这里用序数尺度转换分类值
    .y(function(d) { return yScale(d.yField); });

情况2：X轴是日期/时间字符串（比如"2024-05-01"、"10:30"这类） #

这种情况需要先把字符串转换成Date对象，再用**时间尺度（time scale）**来处理：

// 第一步：定义时间解析器，根据你的日期格式调整（比如"%Y-%m-%d"对应年-月-日）
var parseTime = d3.time.format("%Y-%m-%d").parse;

// 第二步：遍历数据，把X字段的字符串转成Date对象
yourData.forEach(function(d) {
    // 可以加个异常处理，避免无效字符串导致的NaN
    d.xField = parseTime(d.xField) || new Date(); 
});

// 第三步：创建时间尺度
var xScale = d3.time.scale()
    .domain(d3.extent(yourData, function(d) { return d.xField; })) // 自动获取时间范围
    .range([0, chartWidth]);

// 第四步：折线生成器里使用时间尺度
var lineGenerator = d3.svg.line()
    .x(function(d) { return xScale(d.xField); })
    .y(function(d) { return yScale(d.yField); });

额外检查点 #

• 确认你的折线生成器里，X坐标的处理确实用了对应的尺度，不要直接用原始的字符串值；
• 检查数据里有没有空值、格式错误的X字段，这类数据也会导致解析失败生成NaN，可以提前过滤或者处理掉。

内容的提问来源于stack exchange，提问作者223seneca