如何使用 nvd3 折线图在 x 轴上显示日期答案

【问题标题】：How Can I display dates on the x-axis using nvd3 line charts如何使用 nvd3 折线图在 x 轴上显示日期
【发布时间】：2013-02-21 12:52:05
【问题描述】：

当我将数字传递到 x 轴时，图表会显示出来。但是当我试图在 x 轴上传递日期时，它什么也不显示。我已经给了这样的x轴

chart.xAxis
           .axisLabel('Date')
           .tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)); });

还有一个 y 轴问题，标签未显示在任何图表中。

Here 是我的代码的 jsfiddle。

【问题讨论】：

你看过这个帖子吗？ stackoverflow.com/questions/14058876/…
试过了没用......

标签： javascript d3.js nvd3.js

【解决方案1】：

我做错的是给出日期字符串而不是日期 obj。

所以我拆分 JSON 并使用 x 轴标签的日期字符串创建日期对象。如下所示。

new Date(dateStr)

现在一切正常

【讨论】：

作为tickFormat 的参数的函数将接收每个数据值的x 属性作为d。然后必须使用x: new Date(dateStr) 生成您的数据； tickFormat 回调将在 d 中接收表示为时间戳的日期，然后您可以将其转换回 Date 对象并将其提供给 d3.time.format。至少，这就是我理解它并使我的代码工作的方式:)

【解决方案2】：

有两件事：

您可以设置代码；
您可以将您的值从随机字符串转换为 NVD3 可以理解的内容

如果你在 X 轴上提供一个 String，NVD3 不知道如何排序，所以需要一个 Date 对象。您可以像这样设置图表：

chart.xAxis
  .x(function(d) { new Date(d.x) }) // this convert the data object
  .axisLabel('Date')
  .tickFormat(function(d) { return d3.time.format('%Y-%m-%d')(new Date(d)); }); // this convert the ticker

【讨论】：