Недопустимое значение для <path> атрибут

Question

Я вижу другие сообщения с этой проблемой, но я просто не могу их решить. Я новичок в d3 и пытаюсь загрузить некоторые данные в линейном график, но я постоянно получаю ошибку

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

У меня есть настройки все, как в примере (который работал), но это не по какой-то причине. Я возвращаю данные из webservice в виде следующей формы: 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; }