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

【问题标题】：Show Date/time in x axis using react d3使用 react d3 在 x 轴上显示日期/时间
【发布时间】：2017-11-07 12:32:37
【问题描述】：

我对 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”，

【问题讨论】：

标签： reactjs d3.js react-d3

【解决方案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)) }}
/>

【讨论】：