使用D3.js复现堆叠面积图失败的问题求助

Let’s break down why your stacked area chart isn’t showing up—since you’ve confirmed the TSV loads successfully and JSON-based versions work, the issue almost certainly lies in TSV parsing nuances or stacked data processing steps that are easy to miss. Here’s how to fix it:

1. Verify TSV Parsing & Data Types #

TSV files parse all values as strings by default, unlike JSON which preserves numbers/dates. This is the #1 culprit for missing charts. Add a console log to inspect your parsed data:

d3.tsv("data.tsv").then(function(data) {
  console.log("Parsed TSV Data:", data); // Check this output in dev tools
  // Rest of your code
});

Look for two critical issues:

• Numeric values: Are your series values being converted to numbers? If you skip this, d3.stack() will generate NaN values, and no area will render.
• Date formatting: Is your date string being parsed into a valid Date object? Mismatched date formats (e.g., using %Y/%m/%d instead of %Y-%m-%d) will break the x-axis mapping.

Fix this with explicit type conversion:

data.forEach(function(d) {
  d.date = d3.timeParse("%Y-%m-%d")(d.date); // Match your TSV's date format
  // Convert all non-date fields to numbers
  Object.keys(d).forEach(key => {
    if (key !== "date") d[key] = +d[key];
  });
});

2. Confirm Stack Generator Field Matching #

Double-check that the keys you pass to d3.stack().keys() exactly match your TSV’s header names—case sensitivity and spaces matter. For example:

• If your TSV header is online_sales, don’t write onlineSales in your keys array.
• If headers have spaces (e.g., In Store Sales), wrap the key in quotes: ["In Store Sales", "Online Sales"].

3. Validate Y-Axis Domain & Area Generator #

If your stacked data is valid but the area is drawn outside the visible chart area, your y-axis domain is likely incorrect. Update it to account for the total stacked height:

var y = d3.scaleLinear()
  .domain([
    0,
    d3.max(stackedData, d => d3.max(d, point => point[1])) // Get max stacked value
  ])
  .range([height, 0]);

Also confirm your area generator uses the correct accessors for stacked data (d[0] for the bottom of the area, d[1] for the top):

var area = d3.area()
  .x(d => x(d.data.date))
  .y0(d => y(d[0]))
  .y1(d => y(d[1]));

4. Address the AH01276 Server Error (Optional but Safe) #

While this error doesn’t directly cause the chart to fail, it’s worth fixing to avoid potential edge cases. The AH01276 error means your server can’t find a default index file. Add a .htaccess file to your home/knocktorius/data.knocktorius.com directory with:

DirectoryIndex index.html

This ensures the server loads your index.html by default when accessing the subdomain.

5. Compare JSON vs. TSV Parsed Data #

Since your JSON-based chart works, print both parsed datasets to the console and compare them:

• Are the field names identical?
• Are numeric values stored as number types in both?
• Are dates valid Date objects in both?
  Any discrepancy here will point you directly to the fix.

Start with step 1—type conversion is the most common oversight with TSV data in D3. Once you confirm your parsed data has valid numbers and dates, the stacked area should render as expected.

内容的提问来源于stack exchange，提问作者Knocktorius Maxima