<path> विशेषता

Question

के लिए अमान्य मान मैं इस समस्या के साथ अन्य पोस्ट देखता हूं लेकिन मैं इसे हल करने के लिए प्रतीत नहीं कर सकता। मैं d3 लिए नया हूँ और एक लाइन ग्राफ में कुछ डेटा लोड करने के लिए कोशिश कर रहा हूँ, लेकिन मैं

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

मैं एक उदाहरण की तरह सेटअप सब कुछ (जो काम किया) है त्रुटि मिलती रहती है, लेकिन यह नहीं है किसी कारण से काम करना मुझे निम्नलिखित फॉर्म की सूची के रूप में एक webservice से डेटा वापस मिल रहा है: दिनांक = "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

मुझे अपने कोड के साथ एक ही समस्या का सामना करना पड़ा। मैंने पाया कि ऐसा इसलिए है क्योंकि यदि कोई मूल्य नहीं है तो यह त्रुटि आ जाएगी। हमें उस मूल्य के लिए एक जांच करना है जैसे हम उपयोग कर रहे हैं: अगर (! मूल्य) { मूल्य = सही_वृत्त; }