javascript - 简单的 D3.js 折线图，其中包含每小时收集的值数据

Question

我真的是 D3.js 的新手，我需要使用每小时收集的值生成一个简单的折线图

我正在尝试使用这个 D3.js 示例 ...

http://bl.ocks.org/d3noob/b3ff6ae1c120eea654b5

... 并使其适应我的数据，就像这样

6/28/2016-10:2:0,24.3
6/28/2016-9:2:0,23.2 
6/28/2016-8:2:0,22.2 
6/28/2016-7:2:0,21.5 
6/28/2016-6:2:0,21.2 
6/28/2016-5:2:0,20.8 
6/28/2016-4:2:0,21.6 
6/28/2016-3:2:0,21.6 
6/28/2016-2:2:0,22.0 
6/28/2016-1:2:0,22.4 
6/28/2016-0:2:0,23.3 
6/27/2016-23:2:0,25.0
6/27/2016-22:2:0,25.4
6/27/2016-21:2:0,27.0

其中 6/28/2016-10:2:0 是时间 (mm/dd/yyyy-hh:mm:sec)，24.3 是我想要绘制的值(请注意，我可以修改此结构如果需要...)

在我的情况下如何设置时间格式，那么我如何修改以下行？

// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;

我必须修改这些行才能用我的数据复制示例代码吗？

有什么 sample /建议吗？

很抱歉这个入门级的问题，我希望在这之后我可以以更独立的方式进行下一步!!!

切萨雷

Answer 1

用您的数据替换示例中 data.csv 中的数据应该可行。 D3 将自行缩放并绘制图表上的值。如果您想更改 x 比例并希望包括时间，则必须在您从该行提到的同一行中更改格式说明符:

var parseDate = d3.time.format("%d-%b-%y").parse;

到这一行:

var parseDate = d3.time.format("%m/%d/%Y-%H:%M:%S").parse;

我已经为您的代码添加了示例，请查看:line chart with date and time .

Here是您可以使用的格式说明符列表，这里是 example .