D3 Typeerror无法读取未定义的属性

Question

我正在尝试遵循本指南，但要实现自己的数据：

https://www.d3-graph-gallery.com/graph/stackedarea_basic.html

这是我的职能

getStackedAreaChart: function(pod) {
      //eval is sligtly heavily used here.
      var cssName = ".stackedareachart-" + pod;
      var podData = eval("this.StackedAreaChartData" + pod);
      var ListName = eval("this.List" + pod);
      // set the dimensions and margins of the graph
      var margin = { top: 10, right: 30, bottom: 30, left: 60 },
        width = 460 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;

      // append the svg object to the body of the page
      var svg = d3
        .select(cssName)
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      var sumstat = d3
        .nest()
        .key(function(d) {
          return d.time;
        })
        .entries(podData);
      console.log(sumstat);
      // Stack the data: each group will be represented on top of each other
      var mygroups = ListName; // list of group names
      var mygroup = []; // list of group names
      for (let i = 1; i <= mygroups.length; i++) {
        mygroup.push(i);
      }
      console.log(mygroups);
      console.log(mygroup);
      var stackedData = d3
        .stack()
        .keys(mygroup)
        .value(function(d, key) {
          return d.values[key].interactionCount;
        })(sumstat);

      // Add X axis --> it is a date format
      var x = d3
        .scaleLinear()
        .domain(
          d3.extent(podData, function(d) {
            return d.time;
          })
        )
        .range([0, width]);
      svg
        .append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x).ticks(5));

      // Add Y axis
      var y = d3
        .scaleLinear()
        .domain([
          0,
          d3.max(podData, function(d) {
            return +d.interactionCount;
          })
        ])
        .range([height, 0]);
      svg.append("g").call(d3.axisLeft(y));

      // color palette
      var color = d3
        .scaleOrdinal()
        .domain(mygroups)
        .range([
          "#e41a1c",
          "#377eb8",
          "#4daf4a",
          "#984ea3",
          "#ff7f00",
          "#ffff33",
          "#a65628",
          "#f781bf",
          "#999999"
        ]);

      // Show the areas
      svg
        .selectAll("mylayers")
        .data(stackedData)
        .enter()
        .append("path")
        .style("fill", function(d) {
          name = mygroups[d.key - 1];
          return color(name);
        })
        .attr(
          "d",
          d3
            .area()
            .x(function(d, i) {
              return x(d.data.key);
            })
            .y0(function(d) {
              return y(d[0]);
            })
            .y1(function(d) {
              return y(d[1]);
            })
        );
    }
  }

这是我得到错误的地方：

TypeError: Cannot read property 'interactionCount' of undefined

  var stackedData = d3
    .stack()
    .keys(mygroups)
    .value(function(d, key) {
      return d.values[key].interactionCount;
    })(sumstat);

由于某种原因，如果我使列表mygroup在数组中的元素减少了一个，则不会出现此错误。但是，我的图表看起来不正确。

我逐字遵循了指导词，并且复制图表没有问题。但是，使用自己的数据时，我遇到了问题。这是json数据：

[{"interactionCount":0,"time":951,"pod":"POD2","client":"C1"},{"interactionCount":6,"time":951,"pod":"POD2","client":"C2"},{"interactionCount":0,"time":951,"pod":"POD2","client":"C3"},{"interactionCount":14,"time":951,"pod":"POD2","client":"C4"},{"interactionCount":44,"time":951,"pod":"POD2","client":"C5"},{"interactionCount":0,"time":951,"pod":"POD2","client":"C6"},{"interactionCount":8,"time":951,"pod":"POD2","client":"C7"},{"interactionCount":0,"time":951,"pod":"POD2","client":"C8"},{"interactionCount":5,"time":951,"pod":"POD2","client":"C9"},{"interactionCount":2,"time":951,"pod":"POD2","client":"C10"},{"interactionCount":0,"time":951,"pod":"POD2","client":"C11"},{"interactionCount":13,"time":951,"pod":"POD2","client":"C12"},{"interactionCount":6,"time":951,"pod":"POD2","client":"C13"},{"interactionCount":0,"time":951,"pod":"POD2","client":"C14"},{"interactionCount":6,"time":951,"pod":"POD2","client":"C15"}]

我在想，也许错误是在interactionCount为0时发生的。这不是问题。我做了测试。

尽管我正在逐步遵循指南。收到错误，我做错了什么？

注意我的数据是json数据。用户使用CSV数据。这可能是我的问题吗？