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

Question

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

在上面的例子中，你可以看到 x 轴上只有 7 个刻度，而它应该有 8 个刻度。在 tickFormat 中打印出来，我了解到似乎有两个 Mar 25 日，这就是为什么它实际上只显示 7 个刻度。

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

Answer 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

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

NVD3: Weird Behavior When Using Date as X-Axis Ticks

javascript

d3.js

nvd3.js