绘图堆叠面积图仅显示五分之四

Question

在下面的代码中，我正在绘制一个堆积区域图。由于某种原因，图中仅显示了 5 条迹线中的 4 条。请帮我弄清楚如何显示最终的痕迹。

这是一些获取绘图数据的工作代码：

<div id = "plot33"></div>
<script src="https://d3js.org/d3.v4.js"></script>

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


// Filter cities as specified in the R code
var selectedCities = ["Austin", "Houston", "Dallas", "San Antonio", "Fort Worth"];
var filteredData = txhousing.filter(data => selectedCities.includes(data.city));

// Convert sales to numbers
filteredData.forEach(data => {
  data.sales = parseInt(data.sales, 10);
});

// Group and sum by city and year
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);
});


// Multiple austin by 2 to make it stand out more
if (citiesGrouped.Austin) {
  citiesGrouped.Austin.forEach(entry => {
      entry.sales *= 2;
  });
}

这是绘图代码，仅显示 5 条迹线中的 4 条：

// Create an array to store the traces
var traces = [];

let urbanThemeYellow = "#fabd36"
let urbanThemeBlue = "#2e95cf"
let urbanThemeGray = "#d1d1d1"
let urbanThemePurple = "#e83b8a"
let urbanThemeBlack = "#000000"


// Add a trace for each city
selectedCities.forEach((city, index) => {
    let cityData = citiesGrouped[city];

    let trace = {
        x: cityData.map(data => data.year),
        y: cityData.map(data => data.sales),
        fill: 'tozeroy',
        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'; // Replace with appropriate color if available
            trace.line = {color: '#FF6347'};
            break;
    }
    
    traces.push(trace);
});

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

// Plot the graph
Plotly.newPlot('plot33', traces, layout);

您可以看到奥斯汀的数据在那里，但蓝色奥斯汀颜色没有显示在绘图上。为什么不呢？

Answer 1

这是因为所有轨迹都用

fill: 'tozeroy'

设置，因此它们不是堆叠的，而是 overlaid ：y 不相加（如果我们注释掉开关块或使用非完全不透明的颜色，我们可以看到痕迹被覆盖）。

为了正确堆叠它们，您需要将它们分配给

stackgroup

，同一组中的迹线将填充到该组的下一条迹线。默认情况下，堆叠还会使用

fill

（如果

"tonexty"

是水平的，则使用

"tonextx"

）打开

orientation

。

let trace = {
    x: cityData.map(data => data.year),
    y: cityData.map(data => data.sales),
    fill: 'tonexty',
    stackgroup: 'one',
    type: 'scatter',
    mode: 'none',
    name: city
};