nvd3格式化日期总是返回1970-01-01 [英] nvd3 formatting date returns always 1970-01-01

问题描述

我正在尝试使用 nvd3 为 建立折线图，但在x轴上使用日期区域时遇到问题。

I'm trying to build a line chart using nvd3 for d3js but I've got some problems using a date domain on the x axis.

这是我的代码：

data_lineChart = [
{
    "key" : "key1",
    "values" : [
        { "x" : "2014-04-20",
          "y" : -6
        },
        { "x" : "2014-04-13",
          "y" : -5
        },
        { "x" : "2014-04-06",
          "y" : -1
        },
      ]
},
{
    "key" : "key2",
    "values" : [
        { "x" : "2014-04-20",
          "y" : 6
        },
        { "x" : "2014-04-13",
          "y" : 5
        },
        { "x" : "2014-04-06",
          "y" : 1
        },
      ]
}
]

nv.addGraph(function() {
        var chart = nv.models.lineChart();
        chart.xAxis
            .tickFormat(function(d) { return d3.time.format("%Y-%m-%d")(new Date(d)) });
        chart.yAxis
            .tickFormat(d3.format(',.2f'));
        chart.tooltipContent(function(key, y, e, graph) {
            var x = d3.time.format("%Y-%m-%d")(new Date(parseInt(graph.point.x)));
            var y = String(graph.point.y);
            var y = 'There is ' +  String(graph.point.y)  + ' calls';
            tooltip_str = '<center><b>'+key+'</b></center>' + y + ' on ' + x;
            return tooltip_str;
        });
        d3.select('#chart1 svg')
            .datum(data_lineChart)
            .transition()
            .duration(500)
            .call(chart);
    return chart;
});

我得到的是ax轴，其中每个日期都是1970-01-01， code> d in

What I get is a x axis in which every date is 1970-01-01 and this because the d in

chart.xAxis
        .tickFormat(function(d) { return d3.time.format("%Y-%m-%d")(new Date(d)) });

的范围是从1到-1，而不是预期的x值。

ranges from 1 to -1 instead of the expected x value.

它有什么问题？

编辑：
从@ AmeliaBR的解决方案开始，我已经设法使用这个代码：

Starting from @AmeliaBR's solution I've managed to make this work using this code:

var chart = nv.models.lineChart().x( function(d){ return new Date(d.x);} );
chart.xScale = d3.time.scale();
chart.xAxis.tickFormat(function(d) { return d3.time.format("%d-%m-%Y")(new Date(d)) });

这是因为在 tickFormat d 作为 int 与UNIX时间戳传递，因此我需要在格式化之前再次解析日期。

This because, in the tickFormat function, d was passed as an int with the UNIX timestamp, and so I needed to parse the date again before formatting it.

推荐答案

您从不告诉NVD3您的x值是日期。默认情况下，对于折线图NVD3使用线性（数值）x轴。当它试图将每个x值日期字符串转换为数字时，它会得到 NaN （不是一个数字）。因此，它最终没有任何有效的x值，从中创建x轴域，并使用[-1,1]作为默认值。

You're never telling NVD3 that your x-values are dates. By default, for a line chart NVD3 uses a linear (numerical) x-axis. When it tries to convert each of your x-value date strings to numbers, it gets NaN (not a number). It therefore ends up without having any valid x values from which to create the x axis domain, and uses [-1,1] as the default.

图表函数如何从您的数据获取有效的线性值。您可以通过在图表对象上设置x-accessor函数来完成此操作：

You need to tell the chart function how to get a valid linear value from your data. You do this by setting an x-accessor function on your chart object:

    var chart = nv.models.lineChart()
                  .x( function(d){ return Date(d.x);} );

您也可以专门告诉图表使用 x轴的日期比例。它不是必需的（一旦你将字符串转换为日期，它们可以自动转换为有效的数字），但它会导致更好的刻度值（基于日期和时间单位的偶数倍，而不是偶数的毫秒数） / p>

You can also specifically tell the chart to use a Date scale for the x-axis. It's not required (once you convert your strings to Dates, they can be automatically converted into valid numbers), but it will result in better tick values (based on even multiples in date and time units, instead of even multiples of milliseconds).

    chart.xScale = d3.time.scale();
    chart.xAxis
        .tickFormat(function(d) { return d3.time.format("%Y-%m-%d")(d) });

请注意，从日期 - 时间标度传递给tick格式的tick值是一个日期值，因此您只需要将其格式化为打印，您不需要任何转换。

Note that tick value passed to the tick format from the date-time scale is a date value, so you only have to format it for printing, you don't need any conversion.

这篇关于nvd3格式化日期总是返回1970-01-01的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！