D3.js加载文件绘图报错：<path>属性d期望数字却得到MNaN,NaNZ

Hey there! That d3.v3.min.js:1 Error: <path> attribute d: Expected number, "MNaN,NaNZ" error is a classic sign that D3 is trying to use non-numeric values (specifically NaNs) when calculating coordinates for your path elements. Your hunch about the date variable being parsed into NaN is totally on target— let's break down how to fix this.

Common Causes & Solutions #

• Your date values are still strings, not Date objects
  When loading data from a CSV/TSV or other file, D3 doesn't automatically convert date strings into valid Date objects. If you try to use a raw string in a time scale (like d3.time.scale()), it'll get coerced into NaN, which directly causes that path error.

• Fix: Explicitly parse dates during data loading
  In D3 v3, you'll use d3.time.format() to create a parser that matches your date string format. Here's a concrete example for loading a CSV:

  // Adjust the format string to match your actual date format in the file
  var dateParser = d3.time.format("%Y-%m-%d").parse;
  
  d3.csv("your-data-file.csv", function(row) {
    return {
      date: dateParser(row.date), // Parse the date string into a Date object
      value: +row.value // Don't forget to convert numeric fields to numbers too!
    };
  }, function(error, loadedData) {
    if (error) throw error;
  
    // Verify parsed data (check your browser console)
    console.log("Parsed data sample:", loadedData[0]);
  
    // Proceed with your drawing logic here
  });
  

• Double-check your date format string
  If you still get NaNs for dates, your format string doesn't match the actual dates in your file. For example:

  • If your dates look like 05/22/2024, use "%m/%d/%Y"
  • If they're 22-May-2024, use "%d-%b-%Y"
  • Match the specifiers to your exact date syntax to ensure proper parsing.

• Check for missing or misnamed fields
  Make sure your file doesn't have empty date values, and that you're referencing the correct field name (e.g., if your CSV column is labeled Date instead of date, use row.Date in the parser).

Quick Debugging Tip #

After loading the data, log a sample of it to the console (console.log(loadedData)). If the date property shows as Invalid Date or NaN, you know the parsing step is where the problem lies.

Try these steps out— if you're still stuck, sharing a small snippet of your data file and the code you're using to load it would help narrow things down even more!

内容的提问来源于stack exchange，提问作者Сергей Матвеев