Question

我使用d3 v3解析一些具有以下格式的日内数据：

time,value
09:00,1
09:05,2
09:10,3
...

所以我设置了一个解析变量：

var parseTime = d3.time.format("%H:%M").parse;

我在csv调用范围内映射数据：

d3.csv("my_data.csv", function(error, rawData) {
    var data = rawData.map(function(d) {
        return {y_value: +d.value, date: parseTime(d.time)}
    });

    console.log(data)
}

在控制台中，我有些奇怪。而不是只有一个小时，我得到了完整的日期，星期几，月份，甚至是时区。

data->
array[79]
    0:Object->
        date: Mon Jan 01 1900 09:00:00 GMT+0000
        y_value: 1

日期需要是否完整？我想这可以解释为什么我在1月1日星期一结束，似乎是一种默认的种类。但是，根据d3 time documentation，"%H:%M"用于小时和分钟。我可以发誓我做的那么多。

我知道有些事情不太正确，因为我的折线图正在抛出错误：

error: <path> attribute d: expected number "MNaN"

我最好的猜测是日期过度指定，axis()期待一小时格式。

我的问题是：为什么我的数据只被解析为小时？我应该从解析端改变它吗？如果这不是一个选项，我可以让x域读取日期的一部分（小时和分钟部分）吗？

更新：这是一个minimal block，可以进一步说明我的困境。

Answer 1

当你说...

为什么我的数据只被解析为小时？

......很明显，这里存在一个基本的误解。让我们澄清一下。

什么是约会？

简单地说，约会是一个时刻。它可能是现在，或两个月前，或者我儿子出生的那一天，或者下一个圣诞节，或苏格拉底喝了铁杉的那一刻。没关系。重要的是要了解所有这些日期都有一个世纪，十年，一年，一个月，一天，一小时，一分钟，一秒，一毫秒等...（当然，这些名称是可以改变。）

因此，仅使用小时，或只是小时和分钟， date 就没那么有意义了。

解析和格式化

当解析字符串时，您将创建日期对象。如上所述，该日期对象对应于一个时刻，它将包含年，月，小时，时区等...如果字符串本身缺少某些信息，例如 year ，它将默认为某个值。

看看这个演示，我们将使用正确的说明符将字符串解析到日期对象中：

var string = "09:00";
var parser = d3.timeParse("%H:%M");
var date = parser(string);
console.log("The date object is: " + date);

<script src="https://d3js.org/d3.v4.min.js"></script>

如您所见，我们现在有一个日期对象。顺便说一句，您可以看到它默认为给定年份（1900年），给定月份（1月份），依此类推......

但是，在图表中，您无需显示整个对象，即有关该时刻的所有信息。例如，您可以显示小时和分钟。我们将格式化该日期。

看看：

var string = "09:00";
var parser = d3.timeParse("%H:%M");
var format = d3.timeFormat("%H:%M");
var date = parser(string);
console.log("The date object is: " + date);
console.log("The formatted date is: " + format(date));

<script src="https://d3js.org/d3.v4.min.js"></script>

格式化日期对于创建轴，工具提示，文本等非常有用......也就是说，显示您的日期而不显示所有其详细信息。您可以选择要向用户显示的信息（只有年份，或者只是月份，或者可能是日期 - 月份，无论如何）。

这是解析和格式化之间的区别。

为什么要使用格式化程序？

要最终确定，你可能会问：为什么我会使用格式化程序，如果我最终会得到与开头相同的东西？

答案是：你没有同样的事情。现在你有一个日期，而不是一个字符串。并且，使用具有时间刻度的日期，您可以容纳夏令时，闰年，2月只有28天，也就是说，一堆简单的字符串无法做到的事情。

PS：上面的演示使用D3 v4。

编辑：在更新之后，我们可以轻松查看代码问题：您必须将数组传递给range()。

var xScale = d3.time.scale().range([0,width]);

以下是更新的bl.ocks：http://bl.ocks.org/anonymous/a05e15339f7792f175d2bcebccf6bbed/7f23db481f1308eb0d5a1834f7cbc0b17d948167

仅解析小时

1 个答案:

什么是约会？

解析和格式化

为什么要使用格式化程序？