Fehler: <path> Attribut d: erwartete Zahl - wenn ich versuche, ein Liniendiagramm mit D3

Question

zu erstellen Ich versuche, ein mehrzeiliges Diagramm mit D3 zu erstellen. Ich ziehe die Daten aus einer HTML-Tabelle und versuche dann, das Diagramm zu erstellen. Ich bekomme immer einen Fehler und kann nicht herausfinden, wie man es zu einer Nummer bringt und den NaN-Fehler nicht mehr bekommen.

Hier ist mein Code:

 function plantVolumes() { 

     //draw plant volumes table 
     plantView = "<h4>Plant Volumes</h4><table id='dataTable' class='plantVolumeTable'><thead id='plantTableHead'><tr><th>Month Start Date</th><th>Volume Type</th><th>Volume</th><th>Unit</th><th class='hidden'>Volume Src</th></tr></thead><tbody>"; 
     for(i=0;i<plantData1.length;i++) { 

      if(plantData1["MergeKey_lvl00"][i] == mergeKey) { 
       //get volume type 
       for(var j=0;j<plantData2.length;j++) { 
        if(plantData2["VolumeTypeId"][j] == plantData1["VolumeTypeId"][i]) { 
         var volumeType = plantData2["VolumeType"][j]; 
         var volumeUnit = plantData2["Unit"][j]; 
        } 
       } 
       //draw rows 
       plantView += "<tr><td>" + plantData1["MonthStartDate"][i] + "</td><td>" + volumeType + "</td><td>" + plantData1["Volume"][i] + "</td><td>" + volumeUnit + "</td><td class='hidden'>" + plantData1["Volume_src"][i] + "</td></tr>"; 
      } 
     } 
     plantView += "</tbody></table>"; 

     $("#plantVolumesTableDiv").html(plantView); 
     document.getElementById("plantViews").style.display = "block"; 

     initializeDataTable(); 
     //end draw plant volumes table 

     //DRAW LINE CHART     
     //set dimensions of canvas 
     var margin = {top:30, right:20, bottom:30, left:50}, 
      width = 600 - margin.left - margin.right, 
      height = 270 - margin.top - margin.bottom; 

     //parse the date 
     var parseDate = d3.time.format("%Y %b %d").parse; 

     //set the ranges 
     var x = d3.time.scale().range([0, width]); 
     var y = d3.scale.linear().range([height, 0]); 

     //define the axes 
     var xAxis = d3.svg.axis().scale(x) 
      .orient("bottom").ticks(12); 
     var yAxis = d3.svg.axis().scale(y) 
      .orient("left").ticks(5); 

     //define the line 
     var volumeLine = d3.svg.line() 
      //.x((d) => x(d.MonthStartDate)) 
      .x(function(d) { return x(d.MonthStartDate); }) 
      .y(function(d) { return y(d.Volume); }); 

     //add svg to canvas 
     var svg = d3.select("#volumeChart") 
      //.data(data) 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

     //get volume table data 
     var data = $(".plantVolumeTable tbody").children().map(function() { 
      var children = $(this).children(); 

      return { 
       MonthStartDate: children.eq(0).text(), 
       VolumeType: children.eq(1).text(), 
       Volume: children.eq(2).text() 
      }; 
     }).get(); 

     data.forEach(function(d) { 
      d.MonthStartDate = d.MonthStartDate; 
      //d.VolumeType = d.VolumeType; 
      d.Volume = +d.Volume; 
     }); 

     //console.log(data); 

     //scale the range of data 
     x.domain(d3.extent(data, function(d) { return d.MonthStartDate; })); 
     y.domain([0, d3.max(data, function(d) { return d.Volume; })]); 

     //nest data 
     var dataNest = d3.nest() 
      .key(function(d) { return d.VolumeType; }) 
      .entries(data); 
     console.log(dataNest); 
     //loop through volume types/key 
     dataNest.forEach(function(d) { 

      svg.append("path") 
       .attr("class", "line") 
       .attr("d", volumeLine(d.values)); 
     }); 

     //add the x axis 
     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 
     //add the y axis 
     svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis); 
    } 

Irgendwelche Gedanken auf, was ich falsch oder fehlt mache?

Answer 1

Ich habe Ihren Code ein wenig geändert. Sie mussten das Datum an beiden Stellen, der Zeile und dem Domain-Teil analysieren. Außerdem mussten Sie Ihr parseDate so korrigieren, dass es das richtige Format wie die Tabelle hat.

Hier ist mein modifizierten Code:

 function plantVolumes() { 

     //draw plant volumes table 
     plantView = "<h4>Plant Volumes</h4><table id='dataTable' class='plantVolumeTable'><thead id='plantTableHead'><tr><th>Month Start Date</th><th>Volume Type</th><th>Volume</th><th>Unit</th><th class='hidden'>Volume Src</th></tr></thead><tbody>"; 
     for(i=0;i<plantData1.length;i++) { 

      if(plantData1["MergeKey_lvl00"][i] == mergeKey) { 
       //get volume type 
       for(var j=0;j<plantData2.length;j++) { 
        if(plantData2["VolumeTypeId"][j] == plantData1["VolumeTypeId"][i]) { 
         var volumeType = plantData2["VolumeType"][j]; 
         var volumeUnit = plantData2["Unit"][j]; 
        } 
       } 
       //draw rows 
       plantView += "<tr><td>" + plantData1["MonthStartDate"][i] + "</td><td>" + volumeType + "</td><td>" + plantData1["Volume"][i] + "</td><td>" + volumeUnit + "</td><td class='hidden'>" + plantData1["Volume_src"][i] + "</td></tr>"; 
      } 
     } 
     plantView += "</tbody></table>"; 

     $("#plantVolumesTableDiv").html(plantView); 
     document.getElementById("plantViews").style.display = "block"; 

     initializeDataTable(); 
     //end draw plant volumes table 

     //DRAW LINE CHART     
     //set dimensions of canvas 
     var margin = {top:30, right:20, bottom:30, left:50}, 
      width = 600 - margin.left - margin.right, 
      height = 270 - margin.top - margin.bottom; 

     //parse the date 
     var parseDate = d3.time.format("%Y-%m-%d").parse; 

     //set the ranges 
     var x = d3.time.scale().range([0, width]); 
     var y = d3.scale.linear().range([height, 0]); 

     //define the axes 
     var xAxis = d3.svg.axis().scale(x) 
      .orient("bottom").ticks(12); 
     var yAxis = d3.svg.axis().scale(y) 
      .orient("left").ticks(5); 

     //define the line 
     var volumeLine = d3.svg.line() 
      .x(function(d) { return x(parseDate(d.MonthStartDate)); }) 
      .y(function(d) { return y(d.Volume); }); 

     //add svg to canvas 
     var svg = d3.select("#volumeChart") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

     //get volume table data 
     var data = $(".plantVolumeTable tbody").children().map(function() { 
      var children = $(this).children(); 

      return { 
       MonthStartDate: children.eq(0).text(), 
       Volume: children.eq(2).text(), 
       VolumeType: children.eq(1).text() 
      }; 
     }).get(); 

     data.forEach(function(d) { 
      d.MonthStartDate = d.MonthStartDate; 
      d.VolumeType = d.VolumeType; 
      d.Volume = +d.Volume; 
     }); 

     //scale the domain of data 
     x.domain(d3.extent(data, function(d) { return parseDate(d.MonthStartDate); })); 
     y.domain([0, d3.max(data, function(d) { return d.Volume; })]); 

     //nest data 
     var dataNest = d3.nest() 
      .key(function(d) { return d.VolumeType; }) 
      .entries(data); 
     //loop through volume types/key 
     dataNest.forEach(function(d) { 

      svg.append("path") 
       .attr("class", "line " + function(d) {return d.VolumeType;}) 
       .attr("d", volumeLine(d.values)); 
     }); 

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

    }