反応を使ってx軸の日付/時刻を表示するd3

Question

jsに反応するのは非常に新しいです。グラフのx軸に日付/時刻を表示したい。

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

日はのように来て： "誕生日"：ここでは

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

が私のコードです：私は、私は以下のエラーを得た

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

からすべての手順に従ってください持っています」 2011-01-17T00：00：00.000Z "、

Answer 1

xは次のように機能します。

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

x軸に日付があるためです。

x軸に正しいティックが表示されるように、xScale="time",xTicks、xTickFormatの小道具も定義する必要があります。詳細は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)) }} 
/>