Question

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

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

我正在尝试制作散点图，其中x轴是一天中的时间，而不是完整日期。如何让x轴仅显示24个周期，如何获取沿x轴正确绘制的日期点？声音我试图使用d3.time.scale（）或者我应该简单地使用d3.linear.scale（）并解决格式化问题？我想做的是让一周中的每一天都沿着y轴不同点。示例图是here。在此示例中，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（）似乎不接受我传递给它的时间。

http://i.imgur.com/DRtSW.png“完成情节”

Answer 1

您的数据集是JSON数组[...]，其中包含键值对{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);
};

然后，您可以将d3代码传递给修改后的数据集new_data，该数据集仅包含小时和分钟数据。

修改

如果有用，您可能需要编辑上面的代码，将new_date对象实例的格式更改为d3函数可以使用的内容。老实说，我不太熟悉API的日期/时间部分，因此可能需要进行一些更改。我只是想以通用的方式展示你可以做些什么来预处理数据数组，用你需要的数据构建一个数组。

Answer 2

Alex Reynolds：你的意思是

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

此外，您还可以使用格式函数提供时间刻度，该格式函数会将刻度格式化为小时和分钟。看到 https://github.com/mbostock/d3/wiki/Time-Formatting 和 https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickFormat

Answer 3

如果没有日期对象，D3（或者通常是JavaScript）似乎并不能很好地完成时间。我的解决方案是将时间存储为自00:00:00以来的整数分钟（如果我想要精确度，则为秒数）。几分钟内，它就是0到1440之间的一个int。

如果您需要从字符串时间转换（例如＆＃34; 00：00：00＆＃34;），那么这可能有所帮助：

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

如果您的数据已经是int，那么在您的tickformat中您可以使用：

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

或

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

其中padZero是您自己的功能，可填充前导零，以便您不会得到＆＃34; 1：30＆＃34;或＆＃34; 0：0＆＃34;但是＆＃34; 01：30＆＃34;和＆＃34; 00：00＆＃34;

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

3 个答案: