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>
    );
  }
}

约会时间：＆＃34;生日＆＃34;：＆＃34; 2011-01-17T00：00：00.000Z＆＃34;，

Answer 1

您应该以这种方式重写x = function(d) { return new Date(d.birthday); }函数：

xScale="time"

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

您还必须定义xTicks，xTickFormat和<LineTooltip width={600} height={500} data={data} chartSeries={chartSeries} x={x} xScale="time" xTicks={[data.length, '']} xTickFormat={function(d) { return dateFormatter(new Date(d)) }} />道具，以便在x轴上显示正确的刻度。有关详细信息，请查看this working example。

shelve

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

1 个答案: