简单的D3.js折线图，数据是每小时收集的值

Simple D3.js line chart with data that are values collect every hours

本文关键字：每小时 D3 js 折线图 简单 数据      更新时间：2023-09-26

我真的是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;

这些是唯一的行，我必须修改复制样例代码与我的数据?

有什么样品/建议吗?

很抱歉这是一个入门级的问题，我希望在这之后我可以更独立地迈出下一步!!

凯撒

将示例中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;

我已经为你的代码添加了样本，看看这个:带日期和时间的折线图。

这里是你可以使用的格式说明符列表，下面是示例

相关文章：