如何在D3.js中创建有序堆叠面积图？现有实现不符需求求指导

我正尝试在D3.js中创建有序堆叠面积图（重点为“有序”）。当前实现的图表是无序的，样式如下：

我期望实现的效果更接近有序堆叠面积图的示例样式：

在我当前的图表中，蓝色区域应从堆叠顶部开始，到中间位置结束。我不确定使用D3.js的“堆叠面积图”是否为最佳实现方式，疑惑是否方向有误。

最终我通过D3和Python结合绘制面积图实现了类似效果（坐标轴仅作量级参考）：

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