d3.timeFormatがNaNを返します

Question

私はチュートリアルの下のコードを使用してReactでd3折れ線グラフを作成しています。

react.min.js：12エラー：属性D：予想される数、 "MNaN、NaNLNaN、NANC ..." それは私に次のエラーを与え続け

。

私がD3で作成したparseDate関数は、曜日プロパティのNaNを返します。私は何をしていますか？ここでは、コードは次のようになります。

var LineChart = React.createClass({ 

    //define the width, height and chartId as proptypes 
    propTypes: { 
     width:React.PropTypes.number, 
     height:React.PropTypes.number, 
     chartId:React.PropTypes.string 
    }, 

    //set default props 
    getDefaultProps: function() { 
     return { 
      width: 800, 
      height: 300, 
      chartId: 'v1_chart' 
     }; 
    }, 
    //set width as this.state.width for 2-way binding to create responsive chart 
    getInitialState:function(){ 
     return { 
      width:this.props.width 
     }; 
    }, 
    render: function(){ 

     //dummy data 
     const data=[ 
      {day:'02-11-2016',count:180}, 
      {day:'02-12-2016',count:250}, 
      {day:'02-13-2016',count:150}, 
      {day:'02-14-2016',count:496}, 
      {day:'02-15-2016',count:140}, 
      {day:'02-16-2016',count:380}, 
      {day:'02-17-2016',count:100}, 
      {day:'02-18-2016',count:150} 
     ]; 

     //dimensions and position of the chart inside SVG container 
     const margin = {top:5, right:50, bottom:20, left:50}; 
     //ww is set dynamically using this.state.width for responsive charts 
     const w = this.state.width - (margin.left + margin.right); 
     const h = this.props.height - (margin.top + margin.bottom); 

     //use d3 to parse the dates 
     const parseDate = d3.timeFormat("%m-%d-%y"); 

     data.forEach(d=>{ 
      d.date = parseDate(d.day); 
     }); 

     //create scales 
     const x = d3.scaleTime() 
      .domain(d3.extent(data, function (d) { 
       return d.date; 
      })) 
      .rangeRound([0, w]); 

     const y = d3.scaleLinear() 
      .domain([0,d3.max(data,function(d){ 
       return d.count+100; 
      })]) 
      .range([h, 0]); 

     //generate line using scales   
     const line = d3.line() 
        .x(d=>{ 
         x(d.date); 
        }) 
        .y(d=>{ 
         y(d.count); 
        }).curve(d3.curveBasis); 

     //transform the chart position 
     const transform = 'translate(' + margin.left + ',' + margin.top + ')'; 

     //render the line chart 

     return (
      <div> 
       <svg id={this.props.chartId} width={this.state.width} height={this.props.height}> 
        <g transform={transform}> 
         <path className="line shadow" d={line(data)} strokeLinecap="round"/> 
        </g> 
       </svg> 
      </div> 
     );  
    } 
}); 

Answer 1

はtimeParseではなく、timeFormatを使用してみてください：

var day = "02-01-2015"; 
 
var parseDate = d3.timeParse("%m-%d-%Y"); 
 

 
console.log(parseDate(day));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

も小文字yは大文字Yながら、世紀のインジケータなしで年を示していることに注意してください世紀の年を示します。

また、矢印機能付きの{}角かっこを使用している場合は、ラインジェネレータ内の矢印機能に文を追加してみてください（return）。それ以外の場合は完全に括弧をドロップ（ブラケットをスキップするとき、リターンは暗黙的である）：

var h = 300; 
 
    var w = 500; 
 
    
 
    var svg = d3.select('body') 
 
    .append('svg') 
 
    .attr('width',w) 
 
    .attr('height',h); 
 
    
 
    var data=[ 
 
      {day:'02-11-2016',count:180}, 
 
      {day:'02-12-2016',count:250}, 
 
      {day:'02-13-2016',count:150}, 
 
      {day:'02-14-2016',count:496}, 
 
      {day:'02-15-2016',count:140}, 
 
      {day:'02-16-2016',count:380}, 
 
      {day:'02-17-2016',count:100}, 
 
      {day:'02-18-2016',count:150} 
 
     ]; 
 

 
    var parseDate = d3.timeParse("%m-%d-%Y"); 
 

 
    data.forEach(d=>{ 
 
    d.date = parseDate(d.day); 
 
}); 
 

 
     //create scales 
 
var x = d3.scaleTime() 
 
    .domain(d3.extent(data, function (d) { 
 
     return d.date; 
 
    })) 
 
    .rangeRound([0, w]); 
 

 
var y = d3.scaleLinear() 
 
    .domain([0,d3.max(data,function(d){ 
 
    return d.count+100; 
 
    })]) 
 
    .range([h, 0]); 
 

 
//generate line using scales   
 
const line = d3.line() 
 
    .x(d=>x(d.date)) 
 
    .y(d=>y(d.count)) 
 
    .curve(d3.curveBasis); 
 

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

path { 
 
    stroke: black; 
 
    fill:none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>