javascript - 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>