Question

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

在上面的例子中，你可以看到x轴上只有7个刻度，当它应该有8个。在tickFormat中打印出来，我已经知道似乎有两个3月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轴刻度时的奇怪行为

1 个答案: