d3.timeFormat returns 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>