javascript - D3 折线图 - 未捕获类型错误 : Cannot read property 'length' of undefined

Question

我正在处理基于 D3 的图表，并且收到“未捕获的类型错误:无法读取未定义的属性‘长度’”错误，并且无法找出问题所在。如有任何帮助，我们将不胜感激。

这是错误堆栈:

• 行 d3.v3.js:2810
• attrFunction d3.v3.js:1527
• (匿名函数)d3.v3.js:1854
• d3_selection_each d3.v3.js:1860
• d3_selectionPrototype.each d3.v3.js:1853
• d3_selectionPrototype.attr d3.v3.js:1510
• (匿名函数)main.js:74
• (匿名函数)d3.v3.js:442
• 事件 d3.v3.js:526
• 响应 d3.v3.js:404

代码如下:

  var data;
  var BEI = {};
  d3.csv("/pmo/sandbox-lcs/jwstWithD3/BEI2.csv", function(error, data) {

    if (error) {
      console.log("Error: ",error)
    } else {
      //console.log("Data: ",data);
    }

    var m = [40, 120, 40, 120]; // margins
    var w = 600; // width
    var h = 300; // height


    var baselineStartDates = [];
    var baselineFinishDates = [];
    var dateDiffArr = [];
    var statusDate = new Date('3/31/14');
    var duration = ["2013-01-01","2019-12-31"];

    var x = d3.time.scale()
              .domain([new Date(duration[0]),new Date(duration[1])])
              .range([0, w]),
        xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .ticks(d3.time.months,3)
                .tickFormat(d3.time.format("%m-%y")),

          y = d3.scale.linear()
                .domain([0,2]).range([h, 0]),
          yAxis = d3.svg.axis()
              .scale(y)
              .ticks(10)
              .orient("left")

        // Add an SVG element with the desired dimensions and margin.
      var graph = d3.select("#viz").append("svg:svg")
              .attr("width", w + m[1] + m[3])
              .attr("height", h + m[0] + m[2])
              .attr("id","chart_bei")
            .append("svg:g")
              .attr("transform", "translate(" + m[3] + "," + m[0] + ")");


        // Add the x-axis.
          graph.append("svg:g")
               .attr("class", "axis_x")
               .attr("transform", "translate(0," + h + ")")
               .call(xAxis)
             .selectAll("text")
               .attr("y", 0)
               .attr("x", 9)
               .attr("dy", ".35em")
               .attr("transform", "rotate(90)")
               .style("text-anchor", "start");


        // Add the y-axis to the left
          graph.append("svg:g")
               .attr("class", "axis_y")
               .attr("transform", "translate(0,0)")
               .call(yAxis);

  var BEIHard = [{"Date":"2013-01-01","BEI":0.89},
                 {"Date":"2019-12-31","BEI":0.79},
                 {"Date":"2018-12-31","BEI":0.49}];

          graph.append("svg:path")
               .attr("class", "line")
               .attr("d", d3.svg.line() // <<--stack error
                   .x(function(d) { return x(new Date(BEIHard["StatusDate"])) })
                   .y(function(d) { return y(BEIHard["BEI"]) })
               );


    // Not currently being used
    function getBEI() {

      var BEI = BEI;
      var BEIIncomplete = [];
      var BEIIncompleteTaskCount = 0;
      var BEITotalTaskCount = 0;

      data.forEach(function(d,i) { 

        var baselineFinish = new Date(data[i]["Baseline_Finish"]);
        var percentComplete = data[i]["Percent_Complete"];

        if ( baselineFinish < statusDate ) {
          BEITotalTaskCount +=1;
          if ( parseInt(percentComplete) < 100 ) {
            BEIIncompleteTaskCount +=1;
            BEIIncomplete.push(data[i]);
            //document.getElementById('bei').innerHTML += '<strong>ID: </strong>' + JSON.stringify(data[i]["ID"], null, 4) + ' <strong>NAME: </strong>' + JSON.stringify(data[i]["Name"], null, 4) + '<br />';
          }
        }
      })
      BEI = { "Status Date": statusDate,"BEI": (((BEITotalTaskCount-BEIIncompleteTaskCount)/BEITotalTaskCount)).toFixed(1)} ;
      document.getElementById('bei').innerHTML += '<h1>BEI = <strong>' + BEI["BEI"] + '%</strong></h1>';
      window.BEI = BEI;
      //console.log("BEI: ", (BEITotalTaskCount-BEIIncompleteTaskCount)/BEITotalTaskCount);
      //console.log("Number of Incomplete Tasks: ",BEIIncompleteTaskCount);
      //console.log("Total Count of BEI Tasks", BEITotalTaskCount);
      //console.log("Incomplete Tasks: ",BEIIncomplete);
      //console.log("Local BEI: ",BEI);
      return BEI;

    }getBEI();

  });

Answer 1

我通过进行以下调整解决了这个问题:

var line = d3.svg.line()
                   .x(function(d,i) { return x( new Date(d["Date"]) ) })
                   .y(function(d,i) { return y( d["BEI"] ) });

          graph.append("svg:path")
               .attr("class", "line")
               .attr("d", function(d,i) {  return line(BEIHard); });

如果有人可以解释为什么这个解决方案有效，与第一个示例相比，我希望了解这些知识。