D3.js绘制图表时出现value translation(NaN,450)错误求助

嘿，这个value translation (NaN, 450)错误我太熟了——本质就是D3在计算坐标时拿到了NaN值，没法正确渲染元素。我帮你揪出了几个核心问题，一个个来修复：

1. 轴定义域的低级笔误：把log_time写成了date #

你在计算x轴范围的时候写了这段代码：

x.domain(
  d3.extent(responses, function (d) {
    return parseTime(d.date); // 这里错啦！
  })
);

但你的responses数组里，时间字段明明是log_time，不是date啊！d.date是undefined，parseTime(undefined)直接返回NaN，x坐标全崩了，这是最关键的问题。

修复：
把d.date改成d.log_time就行：

x.domain(
  d3.extent(responses, function (d) {
    return parseTime(d.log_time);
  })
);

2. 温度数据是字符串，没转成数字 #

看你的JSON数据，datas_line里的温度值都是字符串（比如"157"），但D3的线性比例尺y只认数字类型。直接传字符串的话，y(d.temperature)会返回NaN，y坐标也废了。

修复：
在构建temp_list的时候，把温度值转成数字，用+号或者Number()都可以：

var temp_list = dateKey.map(function (d) {
  return {
    id: d,
    values: responses.map(function (e) {
      return {
        date: e.log_time,
        temperature: +e[d], // 快速转数字
      };
    }),
  };
});

3. 额外的保险：校验时间解析是否成功 #

虽然你用了正确的时间解析格式，但万一有某个log_time格式不匹配，parseTime会返回null，同样会导致NaN。可以加个小校验跳过无效数据：

// 在处理responses的时候加个判断
if (obj.log_time !== "No data") {
  const parsedDate = parseTime(obj.log_time);
  if (!parsedDate) {
    console.warn(`时间格式不对，跳过这条：${obj.log_time}`);
    return;
  }
  // ... 剩下的处理逻辑
}

把这几个修复点加上，你的图表应该就能正常渲染了，不会再报NaN的错误啦！

内容的提问来源于stack exchange，提问作者Patrick Michel