NVD3时间戳x轴跳过一些日期答案

【问题标题】：NVD3 timestamp x-axis skip some datesNVD3时间戳x轴跳过一些日期
【发布时间】：2015-11-20 07:18:39
【问题描述】：

我是使用 nvd3.js 的新手，我遇到了 x 轴显示时间戳的问题。不知何故，nvd3.js 从收到的时间戳数据中跳过了一些日期。就像图片中一样，nvd3 跳过日期 11/16/2015。

var chart;
nv.addGraph(function() {
    chart = nv.models.stackedAreaChart()
          .margin({
            left: 70,
            bottom: 70
          })
          .x(function(d) { return d[0] })   
          .y(function(d) { return d[1] })   
          .useInteractiveGuideline(false)   
          .rightAlignYAxis(true)
          .showControls(true)       
          .clipEdge(true)
          .options({
                transitionDuration: 500,    
                useInteractiveGuideline: false
            });
    chart.xAxis
        .tickFormat(function (d) {
            return d3.time.format('%x')(new Date(d))
        });
    chart.yAxis.tickFormat(d3.format(',.0f'));
    chart.color(['rgb(63, 127, 191)', 'rgba(63, 63, 191, 0.9)', 'rgba(63, 63, 191, 0.7)', 'rgba(127, 63, 191, 0.7)', 'rgba(63, 191, 191, 0.9)', 'rgba(71, 177, 183, 0.68)']);

    chart.legend.vers('furious');

    d3.select('#chart1')
        .datum(histcatexplong)
        .transition().duration(1000)
        .call(chart)


    nv.utils.windowResize(chart.update);
    return chart;
});

NVD3 skip a date

我试过这个： d3.js nvd3 date on x axis: only some dates are show 但在我的情况下不起作用。

这些是我传递的数据：

var histcatexplong = [
    {
        "key" : "Visit" ,
        "values" : [[1447804800000, 551], [1447718400000, 566], [1447632000000, 525], [1447545600000, 454], [1447459200000, 444], [1447372800000, 501], [1447286400000, 473], [1447200000000, 562]]
    } ,
    {
        "key" : "Search" ,
        "values" : [[1447804800000, 425], [1447718400000, 432], [1447632000000, 410], [1447545600000, 346], [1447459200000, 345], [1447372800000, 392], [1447286400000, 396], [1447200000000, 423]]
    } ,
    {
        "key" : "Redirected" ,
        "values" : [[1447804800000, 104], [1447718400000, 103], [1447632000000, 975], [1447545600000, 832], [1447459200000, 840], [1447372800000, 940], [1447286400000, 944], [1447200000000, 103]]
    } ,
    {
        "key" : "Booking" ,
        "values" : [[1447804800000, 41], [1447718400000, 41], [1447632000000, 37], [1447545600000, 29], [1447459200000, 32], [1447372800000, 44], [1447286400000, 37], [1447200000000, 42]]
    } ,
    {
        "key" : "Payment selected" ,
        "values" : [[1447804800000, 31], [1447718400000, 32], [1447632000000, 30], [1447545600000, 23], [1447459200000, 26], [1447372800000, 29], [1447286400000, 30], [1447200000000, 32]]
    } ,
    {
        "key" : "Issued" ,
        "values" : [[1447804800000, 25], [1447718400000, 31], [1447632000000, 30], [1447545600000, 18], [1447459200000, 21], [1447372800000, 29], [1447286400000, 30], [1447200000000, 26]]
    }
];

【问题讨论】：

你能用你传入图表的数据更新问题吗？您确定要将所有日期都传递到图表中吗？
@shabeer90 我确定所有日期都已传递到图表中。我已经更新了我的问题以包含数据。

标签： javascript charts nvd3.js

【解决方案1】：

您总是可以在 xAxis 中使用函数 tickValues() 添加您的 x 值吗？有了这个，您可以传递应该显示为 x 轴标签的值数组。像这样的：

var x_labels = [1136005200000, ... , 1138683600000];

chart.xAxis
    .tickValues(x_labels)

别忘了格式化！

查看文档：http://nvd3-community.github.io/nvd3/examples/documentation.html#axis

【讨论】：