Javascript D3折线图-未捕获类型错误：无法读取属性'；长度'；未定义的

我正在处理一个基于D3的图表，我收到一个“UncaughtTypeError:Cannotreadproperty'length'of undefined”错误，无法找出问题所在。感谢您的帮助

以下是错误堆栈：

• 第d3.v3.js行：2810
• 属性函数d3.v3.js:1527
• （匿名函数）d3.v3.js:1854
• d3_选择_每个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();

  });

var数据；
var-BEI={}；
d3.csv（“/pmo/sandbox lcs/jwstWithD3/BEI2.csv”），函数（错误，数据）{
如果（错误）{
日志（“错误：”，错误）
}否则{
//日志（“数据：”，数据）；
}
var m=[40120,40120]；//边距
var w=600；//宽度
var h=300；//高度
var baselineStartDates=[]；
var baselineFinishDates=[]；
var dateDiffArr=[]；
var statusDate=新日期（'3/31/14'）；
风险值持续时间=[“2013-01-01”、“2019-12-31”]；
var x=d3.time.scale（）
.domain（[新日期（持续时间[0]），新日期（持续时间[1]））
.范围（[0，w]），
xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）
.滴答声（d3.时间.月份，3）
.tickFormat（d3.time.format（“%m-%y”），
y=d3.刻度.线性（）
.domain（[0,2]）。range（[h，0]），
yAxis=d3.svg.axis（）
.比例（y）
.滴答声（10）
.东方（“左”）
//添加具有所需尺寸和边距的SVG元素。
var-graph=d3.选择（“viz”）.追加（“svg:svg”）
.attr（“宽度”，w+m[1]+m[3]）
.attr（“高度”，h+m[0]+m[2]）
.attr（“id”、“图表”）
.append（“svg:g”）
.attr（“转换”、“平移”（+m[3]+”、“+m[0]+”））；
//添加x轴。
graph.append（“svg:g”）
.attr（“类”、“轴x”）
.attr（“转换”、“平移（0、+h+）”）
.呼叫（xAxis）
.selectAll（“文本”）
.attr（“y”，0）
.attr（“x”，9）
.attr（“dy”，“.35em”）
.attr（“变换”、“旋转（90）”）
.style（“文本锚定”、“开始”）；
//将y轴添加到左侧
graph.append（“svg:g”）
.attr（“类”、“轴y”）
.attr（“转换”、“转换（0,0）”）
.呼叫（yAxis）；
var BEIHard=[{“日期”：“2013-01-01”，“BEI”：0.89}，
{“日期”：“2019-12-31”，“BEI”：0.79}，
{“日期”：“2018-12-31”，“BEI”：0.49}]；
append（“svg:path”）
.attr（“类”、“行”）
.attr（“d”，d3.svg.line（）/我通过以下调整解决了此问题：

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); });

如果有人能解释为什么与第一个示例相比，这个解决方案有效，我想知道。
问题是您没有向线路生成器传递任何数据。谢谢，Lars。昨晚很晚了，它没有点击。今天早上看它完全有意义。我期待着这成为第二天性。谢谢谢谢你的反馈。