遺漏的類型錯誤：無法讀取未定義

Question

數據被正確輸入，但登錄後顯示爲未定義的特性「MYDATA」：

d3.json('linedata.00.json', function(error, data){ 
    console.log(data) 

錯誤顯示了在這條線：

data.mydata.forEach(function (kv) { 
    var labelName = kv.label; 
    var colorName = kv.color 
    kv.values.forEach(function (d) { 
     d.id = d.id; 
     d.color = colorName; 
     d.val = +d.val; 
     d.label = labelName; 
    }); 
}); 

JSON守則如下：

{ 
    "mydata":[ 
     { 
      "id":"line01", 
      "color":"#de6868", 
      "label":"internal", 
      "values":[ 
        {"week":"Week 1","val":37}, 
        {"week":"Week 2","val":38}, 
        {"week":"Week 3","val":33}, 
        {"week":"Week 4","val":32}, 
        {"week":"Week 5","val":40}, 
        {"week":"Week 6","val":27}, 
        {"week":"Week 7","val":30}, 
        {"week":"Week 8","val":37}, 
        {"week":"Week 9","val":42}, 
        {"week":"Week 10","val":36}, 
        {"week":"Week 11","val":35}, 
        {"week":"Week 12","val":37}, 
        {"week":"Week 13","val":33} 
      ] 
     }, 

問題是。爲什麼當一切都在正確的地方（看似）出現錯誤，我該如何解決？

回調在它的全部：

d3.json('linedata.00.json', function(error, data){ 

      console.log(data) 
      data.mydata.forEach(function (kv) { 
       var labelName = kv.label; 
       var colorName = kv.color 
       kv.values.forEach(function (d) { 
        d.id = d.id; 
        d.color = colorName; 
        d.val = +d.val; 
        d.label = labelName; 
       }); 
      }); 
      color.domain(data.mydata.map(function (d) { return d.label; })); 

      myColor = function(d){return d.color}; 

      var tip = d3.tip() 
       .attr('class', 'd3-tip') 
       .offset([-10, 0]) 
       .html(function(d) { 
        return "<span style='color:red'>" + d3.format("$,")(d.val) + "</span>"; 
       }) 

      svg.call(tip); 

      var dataNest = d3.nest() 
       .key(function(d) {return d.label;}) 
       .entries(data.mydata); 

      function make_y_axis() {  // function for the y grid2 lines 
       return d3.svg.axis() 
       .scale(y) 
       .orient("left") 
       .ticks(5) 
      } 

      console.log(yAxis.ticks()); 

      var minY = d3.min(data.mydata, function (kv) { return d3.min(kv.values, function (d) { return d.val; }) }); 
      var maxY = d3.max(data.mydata, function (kv) { return d3.max(kv.values, function (d) {return d.val; }) }); 
      var maxX = d3.max(data.mydata, function (kv){return d3.max(kv.values, function(d){ return d.week + 1;});}); 
      console.log(maxX); 

      var padding = width/(data.mydata[0].values.length + 1)/2; 
      x.domain(data.mydata[0].values.map(function (d) { return d.week; })).rangePoints([padding, width-padding]); 
      y.domain([0,(1.2 * maxY)]); 


      svg.append("g") 
       .attr("class", "x axis") 
       .attr("transform", "translate(0," + height + ")") 
       .call(xAxis); 

      svg.append("g") 
       .attr("class", "y axis") 
       .call(yAxis) 
       .append("text") 
       .attr("transform", "rotate(-90)") 
       .attr("y", 6) 
       .attr("dy", ".71em") 
       .style("text-anchor", "end"); 


      svg.append("g")  // Draw the y grid2 lines 
       .attr("class", "grid2") 
       .call(make_y_axis() 
        .tickSize(-width, 0, 0) 
        .tickFormat("") 
       ); 


      svg.selectAll(".grid2") 
       .selectAll(".tick") 
        .append("rect") 
        .attr("width", width) 
        .attr("height", height/(yAxis.ticks()[0]-1) -3) 
        .attr("class", function(d, i) { 
         return ((i) % 2) == 1 ? "zebraGrey" : "zebraNone"; 
        }) 
        .attr("stroke", "none"); 

      var city = svg.selectAll(".branch") 
       .data(data.mydata) 
       .enter().append("g") 
       .attr("class", "branch"); 

      city.append("path") 
       .attr("class", "line") 
       .attr("id", function(d){return d.id}) 
       .attr("data-legend",function(d){return d.label;}) 
       .attr("d", function (d) { 
        return line(d.values); 
       }) 
       .style("stroke", myColor) 
       .style("fill", "none") 
       .style("stroke-width", 3); 

      svg.selectAll("g.dot") 
       .data(data.mydata) 
       .enter().append("g") 
       .attr("class", "dot") 
       .selectAll("circle") 
       .data(function(d) {return d.values; }) 
       .enter().append("circle") 
       // .style("stroke", function (d){return d.color;}) 
       .attr("r", 2) 
       .attr("cx", function(d,i) { return x(d.week); }) 
       .attr("cy", function(d,i) { return y(d.val); }) 
       .style("stroke", myColor) 
       .style("fill", myColor) 
       .style("stroke-width", 3) 

       // Tooltip stuff after this 
       .on("mouseover", tip.show) 
       .on("mouseout", tip.hide); 

      // add legend  
      var legend = svg.append("g") 
       .attr("class", "legend") 
       .attr("height", 100) 
       .attr("width", 100) 
       .attr('transform', 'translate('+ -1 * .37 * width + ',' + height +')'); 

       legend.selectAll('rect') 
        .data(data.mydata) 
        .enter() 
        .append("rect") 
        .attr("x", function(d, i){return i * 150 + 480}) 
        .attr("y", 40) 
        .attr("width", 10) 
        .attr("height", 10) 
        .style("fill", myColor) 
        .style("stroke", "none"); 

       legend.selectAll('text') 
        .data(data.mydata) 
        .enter() 
        .append("text") 
        .attr("class", "legText") 
        .attr("x", function(d, i){ return i * 150 + 500;}) 
        .attr("y", 50) 
        .style("fill", myColor) 
        .style("stroke", "none") 
        .text(function(d){return d.label}); 


    }); 

Answer 1

感謝大家尋找到這一點。代碼是正確的，我在JSON中有兩個錯誤的昏迷引起了麻煩。謝謝你的關注。