d3堆积条形图问题

Question

对于基于 d3 js 的作业，我们尝试实现堆叠条形图，来自此链接 http://bl.ocks.org/mstanaland/6100713。问题是只有我们的 var dataset 的第一个元素为 y0 和 y 获取正确的值，第二个元素 Earthquake 为 y 获取值 NaN，有时为 y0 获取正值。如果我们为y 提供一个固定级别，则图表会正确堆叠并具有正确的颜色等。

谁能帮忙？

我们当前的代码发布在下面：

  var dataset = d3.layout.stack()(naturalDisasters.map(function(nd) {

    return data.map(function(d) {

      return {x: parse(d.Year), y: +d[nd], y0: 0 };

    });
  }));

变量naturalDisasters是一个包含9类自然灾害的变量

var naturalDisasters = ["Drought", "Earthquake", "Epidemic", 
"ExtremeTemperature", "ExtremeWeather", "Flood", "Landslide", 
"VolcanicActivity", "Wildfire"];

data 是一个包含 118 个对象的数组 {Year: ..., Drought: "2", Earthquake: "0", ....}

目标是创建变量数据集，其值为x、y、y0，对应于上述示例。

Answer 1

关键的第一步是正确格式化数据。这是我在使用 d3 v3 处理堆积面积图 2 天后学到的东西。

1. 在转换和格式化数据之前，根据 x 轴元素对其进行排序。
2. 在转换数据时，请确保每个 x 项都包含所有 y 项，即使值为 0。