NVD3：使用日期作为 X 轴刻度时的奇怪行为答案

【问题标题】：NVD3: Weird Behavior When Using Date as X-Axis TicksNVD3：使用日期作为 X 轴刻度时的奇怪行为
【发布时间】：2016-04-04 23:08:50
【问题描述】：

我正在构建一个应在 x 轴上显示日期的折线图。该图表工作正常，只是日期刻度有点混乱。它跳过一个日期！我在这里复制了这个问题：https://jsfiddle.net/Tanakrit/k0vr99fd/

在上面的示例中，您可以看到 x 轴上只有 7 个刻度，而它应该有 8 个。在tickFormat 中打印出来，我了解到似乎有两个 3 月 25 日，因此是为什么它实际上只显示 7 个滴答声。

让我失望的是，我不确定tickFormat 中的函数是如何获得其d 输入的，因为它们看起来不像我实际提供给图表的x 值。

【问题讨论】：

标签： javascript d3.js nvd3.js

【解决方案1】：

你可以这样做：

var data_full = data();//get all  data
var secondDate = d3.max(data_full[0].values, function(d){ return new Date(d.x)});//get the max date
var firstDate = d3.min(data_full[0].values, function(d){return new Date(d.x)}); get min date
var between = [];
//get all dates between max and min date
while (firstDate <= secondDate) {
    between.push(new Date(firstDate));
    firstDate.setDate(firstDate.getDate() + 1);
}
chart.xAxis
    .axisLabel('Time (days)')
    .rotateLabels(-55)
        .tickValues(between)//set all dates manually with tickValues.
    .tickFormat(function(d) {
        return d3.time.format('%b %d')(new Date(d));
    })
    ;

工作代码here

【讨论】：