0

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

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 轴的不同点。一个示例图在这里。在此示例中，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 “完成的情节”

4

3 回答 3

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 的日期/时间部分不太熟悉，因此可能需要进行一些更改。我只是想以一种通用的方式展示你可以做些什么来预处理你的数据数组，用你需要的数据构建一个数组。

于 2012-10-08T10:31:37.967 回答
0

Alex Reynolds: Did you mean 

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

?

Also you can provide the time scale with a format function that will format the ticks to hour and minute. See https://github.com/mbostock/d3/wiki/Time-Formatting and https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickFormat

于 2012-10-08T17:58:33.973 回答
0

在不需要日期对象的情况下，D3（或者一般来说可能是 JavaScript）似乎不能很好地处理一天中的时间。我的解决方案是将一天中的时间存储为自 00:00:00 以来的整数分钟数（或秒，如果我想要准确性）。在几分钟内，它是 0 到 1440 之间的整数。

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

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你自己的函数在哪里填充前导零，这样你就不会得到“1:30”或“0:0”而是“01:30”和“00:00”

于 2014-06-09T09:08:17.133 回答