如何使用 d3.time.scale() 生成间隔均匀的日期数组？答案

【问题标题】：How to use d3.time.scale() to generate an array of evenly spaced dates?如何使用 d3.time.scale() 生成间隔均匀的日期数组？
【发布时间】：2013-12-09 11:36:06
【问题描述】：

这似乎应该是微不足道的。我想使用d3.time.scale() 来获取一个覆盖一定时间范围的均匀间隔日期数组。例如，年

 [2012-01-01, 2013-01-01, 2014-01-01]

或几个月

 [2012-01-01, 2012-02-01, 2012-03-01 ... 2014-12-01]

或其他。

所以我是这样开始的：

var t = d3.time.scale()
    .domain(d3.extent(dates))
    .nice(d3.time.year);

然后我会从documentation 假设我能够做到这一点

var ticks = t.ticks(d3.time.month,1);

...但这只会返回一个日期。

这给了我几个月的数组

var ticks = t.ticks(30)

...但只是因为我告诉它大概要生成多少滴答声（30），我不会提前知道（除非我自己做一些繁重的工作，这违背了使用 d3 的目的为了这）。

我不明白为什么只告诉它我想要每年、每月、每 3 个月或其他什么都行不通。

我在这里放了一个小提琴：http://jsfiddle.net/herbcaudill/LgGpd/4/

【问题讨论】：

澄清一下，我没有将它与轴对象结合使用。我只想要一个数组。

标签： javascript arrays date d3.js

【解决方案1】：

使用 Date() 构造函数不能可靠地工作——它基本上取决于浏览器。显式解析要安全得多。构造函数不会这样解析。

代替

var dates = getDates().map(function(d) { return new Date(d) });

使用这个：

var dates = getDates().map(function(d) {
    return d3.time.format("%Y-%m-%d").parse(d);
});

修改 jsfiddle here.

【讨论】：

我原来的小提琴链接是错误的——你能看看现在的吗？ jsfiddle.net/herbcaudill/LgGpd/4
这行得通，虽然我不完全清楚为什么。我正在解析日期，但我使用的是new Date(d)，而您使用的是d3.time.format("%Y-%m-%d").parse(d)。据我所知，两者都创建了普通的 Date 对象，但是您的时间已归零，而我的时间则返回以我当地时区表示的时间。我不确定（a）为什么日期的解析方式不同，或者（b）为什么这会对 d3 产生如此大的影响。
使用Date() 构造函数不能可靠地工作——它基本上取决于浏览器。显式解析要安全得多。构造函数不会这样解析。
好的 - 如果您不介意，我会编辑您的答案以明确说明。

【解决方案2】：

使用数据集如

var dataset = [ 
      { "active" : false,
        "date" : "2014-12-12"
      },
      { "active" : true,
        "date" : "2014-12-13"
      },
      { "active" : true,
        "date" : "2014-12-14"
      },
      { "active" : true,
        "date" : "2014-12-15"
      }
    ]

var slicedData = var slicedData = dataset.slice();

我遇到了类似的问题，发现

var x = d3.time.scale()
    .domain([new Date(slicedData[0].date), new Date(slicedData[slicedData.length - 1].date)])
    .range([0,width]);

删除了量表中的第一项（为什么会这样仍然是个谜），而

var dates = slicedData.map(function(d) {
        return d3.time.format("%Y-%m-%d").parse(d.date);
    });
    var t = d3.time.scale()
        .domain(d3.extent(dates))
        .range([0,width])
        .nice(d3.time.day);

工作正常。

所以，我唯一的解释是 Lars 提供的解释。 Date() 是不可预测的，因此请改用 d3.time.format。

【讨论】：