2016-05-06 8 views
0

Javascript配列から折れ線グラフをプロットしようとしています。 d3.js parsing date error with csv file:私はd3で日付を解析中にエラーが発生しました

d3.v3.min.js:1 Error: attribute d: Expected number, "MNaN,0LNaN,450".o @ d3.v3.min.js:1

を言うエラーが出るの日付を解析している間、私は、このスタックオーバーフローの問題に言及した提案を試してみましたみました。しかし、私はまだ同じ問題に直面しています。私がここで間違っていることは何か考えてください。同じことが、tsv入力で実行しようとすると完全に機能します。コードを自分自身を修正

<script src="//d3js.org/d3.v3.min.js"></script> 
    <script> 
     var data = [ 
      { 
       "date": "01-Jan-16", 
       "close": "20" 
       }, 
      { 
       "date": "05-Jan-16", 
       "close": "100" 
       } 
      ]; 



var formatDate = d3.time.format("%d-%b-%y"); 

     function type(d) { 
      d.date = formatDate.parse(d.date); 
      d.close = +d.close; 
      return d; 
     } 

     var margin = { 
       top: 20, 
       right: 20, 
       bottom: 30, 
       left: 50 
      }, 
      width = 960 - margin.left - margin.right, 
      height = 500 - margin.top - margin.bottom; 

     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.close); 
      }); 

     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 + ")"); 


     x.domain(d3.extent(data, function (d) { 
      return d.date; 
      console.log(d.date); 
     })); 
     y.domain(d3.extent(data, function (d) { 
      return d.close; 
      console.log(d.close); 
     })); 

     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("Price ($)"); 

     svg.append("path") 
      .datum(data) 
      .attr("class", "line") 
      .attr("d", line); 
    </script> 

答えて

0

は、ここに私のコードです。

data.forEach(function (d) { 
     d.date = formatDate.parse(d.date); 
     d.close = +d.close; 
     return d; 
    }); 
によって

function type(d) { d.date = formatDate.parse(d.date); d.close = +d.close; return d; }

を置き換えます

関連する問題