Javascript 在D3.js的x轴上仅使用小时和分钟

我有一个如下所示的数据集：

data_set=[{date:'2012,09,04,10,54,53'}，
{日期：'2012,09,05,10,58,57'}，
{日期：'2012,09,11,10,44,05'}，
{日期：'2012,09,04,11,25,30'}，
{日期：'2012,09,04,10,28,55'}，
{日期：'2012,09,04,12,30,17'}，
{日期：'2012,09,04,11,14,23'}，
{日期：'2012,09,04,12,16,10'}，
{日期：'2012,09,04,11,57,46'}，
{日期：'2012,09,04,11,15,53'}，
{日期：'2012,09,04,11,25,43'}，]；

我试着做一个散点图，其中x轴是一天中的时间，而不是完整的日期。如何使x轴仅显示24个周期，以及如何使日期点沿x轴适当绘制？听起来我应该尝试使用d3.time.scale（）还是简单地使用d3.linear.scale（）并解决格式化问题？ 我想做的是让一周中的每一天都成为y轴上的不同点。 下面是一个示例图。在本例中，10=星期一，20=星期二，等等。不同的符号表示一周中特定日期的月份不同日期

因此，我编写了以下函数来从字符串中提取日期，尤其是小时和分钟：

var date_format = d3.time.format("%Y,%m,%d,%H,%M,%S");                                                                                                                               
var time_format = d3.time.format("%X");                                                                                                                                              

使用这些函数，我编写了以下语句：

dd = date_format.parse('2012,01,02,12,39,45')
Mon Jan 02 2012 12:39:45 GMT-0800 (PST)
time_format(dd)
"12:39:45"

因此，在控制台中，我可以看到我获取了一个字符串，将其转换为一个日期，然后使用该日期生成一个时间。d3.time.scale（）似乎不接受我在尝试设置域时传递给它的时间

“已完成绘图”

您的数据集是一个数组

[…]

，包含作为键值对的对象

{date:''.'}

此配对中的值是逗号分隔的字符串

您可以循环遍历数组并（例如）提取小时和分钟值，构建一个新的数据集：

var new_data = [];
for (var idx = 0; idx < data_set.length; idx++) {
    var datum = data_set[idx];
    var date_value = datum.date;
    var date_elements = date_value.split(",");
    var hour = date_elements[3];
    var minutes = date_elements[4];
    var new_date = {};
    new_date.date = hour + "," + minutes;
    new_data.push(new_date);
};

var new_data=[]；
对于（var idx=0；idx

然后，您可以将修改后的数据集

new_data

传递给d3代码，该数据集只包含小时和分钟数据

编辑

---

如果有用，您可能需要编辑上面的代码，将

new_date

对象实例的格式更改为d3函数可以使用的格式。老实说，我不太熟悉API的日期/时间部分，因此可能需要进行一些更改。我只是想用一种通用的方式展示一下你可以做些什么来预处理你的数据数组，用你需要的数据构建一个数组。

亚历克斯·雷诺兹：你是说

    new_date.date = hour + ":" + minutes;

?

您还可以为时间刻度提供一个格式化功能，将刻度格式化为小时和分钟。看见 及 D3（或者通常的JavaScript）在不需要日期对象的情况下似乎不能很好地处理一天中的时间。我的解决方案是将一天中的时间存储为从00:00:00开始的整数分钟数（如果我想要精度，可以存储为秒）。在几分钟内，它是一个介于0和1440之间的整数

如果需要从字符串时间（如“00:00:00”）转换，这可能会有帮助：

time = (parseInt(d.x.split(':')[0]) * 60)  + parseInt(d.x.split(':')[1]);

如果您的数据已经是整数，那么您可以使用以下格式：

.tickFormat(function(d) { 
  return Math.floor((d)/60) + ":" + ((d)%60);
});

或

---

其中，

padZero

是您自己的函数，它填充前导零，这样您就不会得到“1:30”或“0:0”，而是“01:30”和“00:00”

我已经添加到我的原始帖子中，基本上我使用d3函数将字符串转换为日期，将日期转换为时间，但d3.time.scale似乎不接受它生成的时间。是的，我同意我可以设置日期格式，但我认为在这种情况下，我仍然被卡住了，因为我希望在不同的日期（9月1日和9月8日），但一周中的同一天和时间（周一，上午9点）绘制在x轴的同一点上。对-我想我正在想象创建日期，但没有日期部分，因此，事实上，您正在为同一（默认）天（可能是1970年1月1日）的不同时间创建日期对象。可以将上述内容替换为：“new_date.date=新日期（小时+”：“+分钟）；”然后使用格式隐藏所有数据都在错误日期的事实。

.tickFormat(function(d) { 
  return padZero(Math.floor((d)/60)) + ":" + padZero((d)%60));
});