在 x 轴上使用日期时间时，NVD3 折线图刻度错误地与网格对齐

Question

我目前正在使用 Angular Directive (angular-nvd3) 处理 NVD3。我有一个非常简单的折线图，其中包含非常简单的数据。

我现在遇到的问题是我的数据与轴对齐错误。示例 plunker 可在此处获得：http://plnkr.co/edit/jWEYt6?p=preview，

我在我的 xAxis 上使用日期，这些日期是使用 d3 库解析的：

tickFormat: function(d) {return d3.time.format('%d/%m')(new Date(d))}

说明：

我希望 xAxis 标签与网格相对应。

在示例中，您可以清楚地注意到 xAxis 不是均匀划分的（值：06/11、08/11、11/11、13/11）。所以通常是 2 天，有时是 3 天 :)

更糟糕的是 - 峰与网格不匹配。示例：06/11 刻度线实际上甚至没有接近我猜它应该在的网格线。

我也在来自 repo 的 master's 代码上尝试过这个，它也发生在那里。 HTML head 部分有一个链接。

我的数据、正确的日期格式或其他问题是否存在问题？谢谢！

Answer 1

这困扰了我一段时间，我在这里找不到答案。我什至在 GitHub 上打开了一个错误：https://github.com/novus/nvd3/issues/1382#issuecomment-160694559，我得到了答案。

---

问题：

由于d3.time.format('%d/%m')，实际问题被隐藏了。我的示例数据以每天一次的方式给出，格式也相应设置。但是d3 不明白这一点。绘制网格时，它会划分max-min/someValue，并且网格刻度不必在全天（午夜）出现，而是在任何时间出现。而且由于格式的原因，我看不到。

显示这种误解的版本在这里：http://plnkr.co/edit/2iMHOp?p=preview

---

解决方案：

所以现在，当我知道我能做什么时，我设法通过在 nvd3 / 角度包装器中使用 tickValues 参数来替换刻度。 带有解决方案的版本在这里： http://plnkr.co/edit/23n3ll?p=preview

---

又一个错误 :)

有趣的是，由于标签太长而无法显示，我不得不旋转它们以使其适合。这里发生了另一个错误（我认为）。如您所见，缺少 2nd 和 last but one 刻度标签。首先，我尝试使用此处提到的解决方案：NVD3 Line Chart X Axis Ticks Are Missing using the showMaxMin parameter 但它无法正常工作。但是，如果您将标签旋转到 ~-70 度，则标签显示正常。

我想这不是我的 NVD3 旅程的结束；）

Answer 2

既然问题是，根据阿泰斯的说法：

由于 d3.time.format('%d/%m')，实际问题被隐藏了。我的示例数据以每天一次的方式给出，格式也相应设置。但 d3 不明白这一点。绘制网格时，它会划分 max-min/someValue 并且网格刻度不必在全天（午夜）发生，而是在任何时间发生。而且由于格式的原因，我看不到。

我设法将 x 的值作为 整数值（例如：20160211）而不是格式化日期（例如：2016-02-11 或类似日期）传递给 nvd3，然后在 tickFormatformat它们才能正确显示。

我用这个问题和评论的解决方案写了另一个plunker（使用momentjs）：

---

出现模拟错误的 Plunker：http://plnkr.co/edit/fXDQ0f?p=preview

数据以x: milliseconds, y: int 的格式提供，例如{x: 1446418800000, y: 20},，并且正在使用tickFormat 进行格式化：

  xAxis: {
    tickFormat: function(d) {
      return moment(d).format('YYYY-MM-DD');
    }
  }

---

Plunker 解决方案：http://plnkr.co/edit/KpALzo?p=preview

数据以x: int, y: int 的格式提供，例如{x: 20160211, y: 20},，并且正在使用tickFormat 进行格式化：

  xAxis: {
    tickFormat: function(d) {
      moment(d, 'YYYYMMDD').format('YYYY-MM-DD');
    }
  }

---

请注意，您也可以使用时间来执行此操作，只需附加到“数字日期”即可。

正如@ajaybc 所述，不适用于不同月份的日期，因为 d3 将使用无效的填充日期（第 32、33、34 天等）插入 X 轴