Plotly堆叠面积图仅显示4条轨迹，Austin轨迹不显示求助

核心问题 #

1. 异步数据加载顺序错误：d3.csv是异步操作，你在回调函数外直接操作txhousing变量时，数据还未加载完成，导致后续过滤、分组逻辑基于未初始化的空值执行，Austin的轨迹数据实际未被正确处理。
2. 堆叠配置错误：当前使用fill: 'tozeroy'是将每个轨迹填充到Y轴0值，而非堆叠显示，这会导致数值较小的轨迹被上层轨迹完全覆盖（即使数据存在也无法显示）。

修复方案 #

1. 修正异步加载逻辑 #

将所有数据处理、绘图代码放入d3.csv的回调函数内部，确保数据加载完成后再执行后续操作：

d3.csv("https://raw.githubusercontent.com/tidyverse/ggplot2/main/data-raw/tx-housing.csv", function(data){
    let txhousing = data;

    // 筛选指定城市
    var selectedCities = ["Austin", "Houston", "Dallas", "San Antonio", "Fort Worth"];
    var filteredData = txhousing.filter(data => selectedCities.includes(data.city));

    // 转换sales为数值类型
    filteredData.forEach(data => {
      data.sales = parseInt(data.sales, 10);
    });

    // 按城市和年份分组求和
    var groupedData = {};
    filteredData.forEach(data => {
        let key = data.city + '_' + data.year;
        if (!groupedData[key]) {
            groupedData[key] = {
                city: data.city,
                year: data.year,
                sales: 0
            };
        }
        groupedData[key].sales += data.sales;
    });

    var finalDataArray = Object.values(groupedData);
    var citiesGrouped = {};
    selectedCities.forEach(city => {
        citiesGrouped[city] = finalDataArray.filter(data => data.city === city);
    });

    // 放大Austin的数据以便观察
    if (citiesGrouped.Austin) {
      citiesGrouped.Austin.forEach(entry => {
          entry.sales *= 2;
      });
    }

    // 生成绘图轨迹
    var traces = [];
    let urbanThemeYellow = "#fabd36"
    let urbanThemeBlue = "#2e95cf"
    let urbanThemeGray = "#d1d1d1"
    let urbanThemePurple = "#e83b8a"
    let urbanThemeBlack = "#000000"

    selectedCities.forEach((city, index) => {
        let cityData = citiesGrouped[city];
        let trace = {
            x: cityData.map(data => data.year),
            y: cityData.map(data => data.sales),
            // 配置堆叠填充：第一条轨迹填充到0，后续填充到前一条轨迹
            fill: index === 0 ? 'tozeroy' : 'tonexty',
            type: 'scatter',
            mode: 'none',
            name: city
        };

        switch (city) {
            case 'Austin':
                trace.fillcolor = urbanThemeBlue;
                trace.line = {color: urbanThemeBlue};
                break;
            case 'Dallas':
                trace.fillcolor = urbanThemeYellow;
                trace.line = {color: urbanThemeYellow};
                break;
            case 'Fort Worth':
                trace.fillcolor = urbanThemeGray;
                trace.line = {color: urbanThemeGray};
                break;
            case 'Houston':
                trace.fillcolor = urbanThemePurple;
                trace.line = {color: urbanThemePurple};
                break;
            case 'San Antonio':
                trace.fillcolor = '#FF6347';
                trace.line = {color: '#FF6347'};
                break;
        }
        traces.push(trace);
    });

    // 配置布局
    var layout = {
        showlegend: true,
        legend: { "orientation": "h", y: -0.2 },
        xaxis: {
            title: 'Year',
            tickvals: Array.from({length: 16}, (_, i) => 2000 + i),
        },
        yaxis: {
            title: 'Home sales',
            rangemode: 'tozero'
        }
    };

    // 绘制图表
    Plotly.newPlot('plot33', traces, layout);
});

2. 调整堆叠填充规则 #

将轨迹的fill属性设置为：

• 第一条轨迹（索引0）使用'tozeroy'，填充到Y轴0值作为堆叠基底
• 后续轨迹使用'tonexty'，填充到前一条轨迹的Y值，实现堆叠效果

验证步骤 #

• 在数据处理完成后添加console.log(citiesGrouped.Austin)，确认Austin的年份和销售数据是否正确生成
• 检查traces数组的长度是否为5，确保Austin的轨迹已被添加

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