次のような配列内に含まれる4474個のオブジェクトを持つJSONがいくつかあります。
data: [
{
"T": "2017-02-04 14:16:51",
"Min": 0,
"Max": 0,
"Average": 0
},
{
"T": "2017-03-27 14:51:23",
"Min": 0,
"Max": 0,
"Average": 0
},
{
"T": "2017-03-27 14:53:23",
"Min": 0,
"Max": "1,7",
"Average": "0,1"
},
{
"T": "2017-03-27 15:23:23",
"Min": "1,6",
"Max": "1,6",
"Average": "1,6"
},
............
............4473,
{
"T": "2017-05-05 14:16:51",
"Min": "1,3",
"Max": "1,3",
"Average": "1,3"
}
];
T を X 軸、Max を Y 軸とする折れ線グラフを描画しようとしています。以下のようなコードを書きました。
let da = data.data;
let as = d3.extent(da, item => Parse(item.T)); // [Sat Feb 04 2017 14:16:51 GMT+0100 (Romance Standard Time), Fri May 05 2017 14:16:51 GMT+0200 (Romance Daylight Time)]
let bs = d3.extent(da, item => item.Max); // [0,17]
<LineChart width={1100} height={650} data={da}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis datakey="T" scale={"time"} domain={ as } allowDataOverflowBoolean={true}/>
<YAxis datakey="Max" scale={"linear"} type="number" domain={bs} allowDataOverflowBoolean={true}/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Line type="linear" dataKey="Max" stroke="#8884d8" activeDot={{r: 8}}/>
</LineChart>
XAxis コンポーネントのドメインとして割り当てると、 [Sat Feb 04 2017 14:16:51 GMT+0100 (Romance Standard Time), Fri May 05 2017 14:16:51 GMT+の代わりにdomain: Array[4474]がログに記録されます。 0200 (Romance Daylight Time)] X 軸に適切なドメインを設定していません。
どんな種類の助けも大歓迎です!!!