使用react d3在x轴上显示日期/时间

Question

我对react js是个新手。我想在我的图表的x轴上显示日期/时间。我已经执行了下面的所有步骤

https://github.com/react-d3/react-d3-tooltip

我得到了下面的错误：

DOMPropertyOperations.js?930e:147 Error: <path> attribute d: Expected number, "MNaN,31.627906976…".

下面是我的代码：

render() {

    var generalChartData = require('./user.js');
    var dateFormatter = d3.time.format("%m-%Y");
  var chartSeries = [
      {
        field: 'age',
        name: 'Age',
        color: '#ff7f0e',

      },{
        field: 'index',
        name: 'index',
        color: '#A46CAD',

      }
    ],
    x = function(d) {
      return d.birthday;
    }
   return (

      <div className="wrapper">
        <LineTooltip
      width= {900}
      height= {500}
      data= {generalChartData}
      chartSeries= {chartSeries}
      x= {x}

    />
      </div>
    );
  }
}

日期：“生日”："2011-01-17T00:00:00.000Z"，

Answer 1

你应该这样重写你的x函数：

x = function(d) {
  return new Date(d.birthday);
}

因为你在x轴上有个日期。

您还必须定义xScale="time"、xTicks和xTickFormat属性才能在x轴上正确显示记号。有关详细信息，请查看this working example。

<LineTooltip
  width={600}
  height={500}
  data={data}
  chartSeries={chartSeries}
  x={x}
  xScale="time"
  xTicks={[data.length, '']}
  xTickFormat={function(d) { return dateFormatter(new Date(d)) }}
/>