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

Question

我对反应 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和xTickFormatprops 以在 x 轴上显示正确的刻度。有关详细信息，请查看此工作示例。

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