<path>属性的值无效

Question

我看到有这个问题的其他帖子，但我似乎无法解决它。我是新来的D3，我试图载入一些数据的折线图，但我不断收到错误

Invalid value for <path> attribute d="MNaN,250LNaN,71.05263157894737LNaN,55.26315789473685

我有一个示例设置一切等（工作），但这不是因某种原因工作。我从web服务获取数据作为以下形式的列表：Date =“1/1/2014”NumberOfActive = 1（示例）。我曾尝试使用解析函数，但它们并不真正起作用。这里是我的代码：

var data; 
     var margin = { top: 20, right: 20, bottom: 30, left: 50 }, 
      width = 1000 - margin.left - margin.right, 
      height = 300 - margin.top - margin.bottom; 

     function parseDateForViewing(d) { 
      return d3.time.format('%b %Y')(d3.time.format('%m/%d/%Y').parse(d)); 
     } 

     function parseDate(d) { 
      return d3.time.format('%c')(d3.time.format('%m/%d/%Y').parse(d)); 
     } 

     var x = d3.time.scale() 
      .range([0, width]); 

     var y = d3.scale.linear() 
      .range([height, 0]); 

     var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom"); 

     var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left"); 

     var line = d3.svg.line() 
      .x(function (d) { return x(d.Date); }) 
      .y(function (d) { return y(d.NumberOfActive); }); 

     var svg = d3.select("body").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 + ")"); 


     $.ajax({ 
      type: "POST", 
      url: "Dashboard.aspx/GetActiveLoansData", 
      data: '', 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (thedata) { 
       var d = thedata.d; 
       data = thedata.d; 

       var _len = d.length; 
       var post, i; 

       for (i = 0; i < data.length; i++) { 
        d = data[i]; 
        var t = parseDate(d.Date); 
        var s = d.Date; 
        x.domain(d3.extent(data, function (d) { return d.Date; })); 
        y.domain(d3.extent(data, function (d) { return d.NumberOfActive; })); 

        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") 
         .text("Closed Loans"); 

        svg.append("path") 
         .datum(data) 
         .attr("class", "line") 
         .attr("d", line); 
       } 
      } 
     }); 

Answer 1

其实之前绘制图形，我需要将日期转换为以下行：

for (i = 0; i < data.length; i++) { 
       data[i].Date = parseDate(data[i].Date); 
      } 

这条线可以看出，在下面的，最终代码：

var data; 
      var margin = { top: 20, right: 60, bottom: 30, left: 50 }, 
       width = 1000 - margin.left - margin.right, 
       height = 300 - margin.top - margin.bottom; 

      function parseDateForViewing(d) { 
       return d3.time.format('%b %Y')(d3.time.format('%m/%d/%Y').parse(d)); 
      } 

      function parseDate2(d) { 
       return d3.time.format('%c')(d3.time.format('%m/%d/%Y').parse(d)); 
      } 
      var parseDate = d3.time.format("%m/%d/%Y").parse; 

      var x = d3.time.scale() 
       .range([0, width]); 

      var y = d3.scale.linear() 
       .range([height, 0]); 

      var xAxis = d3.svg.axis() 
       .scale(x) 
       .orient("bottom"); 

      var yAxis = d3.svg.axis() 
       .scale(y) 
       .orient("left"); 

      var line = d3.svg.line() 
       .x(function (d) { return x(d.Date); }) 
       .y(function (d) { return y(d.NumberOfActive); }); 

      var svg = d3.select("#svgsection").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 d = thedata.d; 
      data = thedata.d; 

      var _len = d.length; 
      var post, i; 

      for (i = 0; i < data.length; i++) { 
       data[i].Date = parseDate(data[i].Date); 
      } 

      for (i = 0; i < data.length; i++) { 
       d = data[i]; 

       x.domain(d3.extent(data, function (d) { return d.Date; })); 
       y.domain(d3.extent(data, function (d) { return d.NumberOfActive; })); 

       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") 
        .text("Closed Loans"); 

       svg.append("path") 
        .datum(data) 
        .attr("class", "line") 
        .attr("d", line); 


       svg.append("text") 
       .attr("x", (width/2)) 
       .attr("y", 0 - (margin.top/2) + 10) 
       .attr("text-anchor", "middle") 
       .style("font-size", "16px") 
       .text("Closed Loans by Month"); 

Answer 2

我遇到了与我的代码相同的问题。我发现，这是因为如果没有值，那么这个错误将会来。我们必须检查我们正在使用的值： if（！value）{value = correct_value; }