Question

我正在尝试使用 nvd3 为 d3js 构建折线图，但我在x轴上使用日期域时遇到了一些问题。

这是我的代码：

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;
});

我得到的是一个x轴，其中每个日期都是1970-01-01，这是因为<{p>}中的d

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

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

它有什么问题？

编辑：从@ AmeliaBR的解决方案开始，我已经设法使用此代码完成了这项工作：

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作为带有UNIX时间戳的int传递，因此我需要在格式化之前再次解析日期。

Answer 1

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

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

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

您还可以明确告诉图表使用Date scale作为x轴。它不是必需的（一旦你将字符串转换为日期，它们就可以自动转换为有效数字），但它会产生更好的刻度值（基于日期和时间单位的偶数倍，而不是偶数倍毫秒）。

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

请注意，从日期 - 时间刻度传递给刻度线格式的刻度值是日期值，因此您只需将其格式化以进行打印，您不需要任何转换。

Answer 2

为什么不使用dateObj.getTime（）

将纪元时间传递给x

更多信息： https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/getTime

以下是我的代码的示例：

chart.xAxis     //Chart x-axis settings
      .axisLabel('Date')
      .tickFormat(function(d) { return d3.time.format('%d-%m-%y')(new Date(d)); })
      .rotateLabels(-15); //This is optional but very useful sometimes

这是我传递给values对象的那种x：

var tmp = new Date(someDate);
tmp = tmp.getTime();
values : [{x:tmp, y:someData}, {x:tmp1, y:someData1}, etc]

nvd3格式化日期始终返回1970-01-01

2 个答案: