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

Question

我目前正在使用 Angular 指令 (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 刻度实际上什至不接近网格线，我猜它应该是。

我也在回购的 master's 代码上尝试过这个，它也发生在那里。 HTML 头部部分有一个 link。

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

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 / angular 包装器中的 tickValues 参数来替换刻度。带有解决方案的版本在这里： http://plnkr.co/edit/23n3ll?p=preview

又一个错误:)

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

我想我的 NVD3 之旅还没有结束 ;)

Answer 2

既然问题是，据Atais说：

The actual issue is hidden because of d3.time.format('%d/%m'). My example data is given in one tick per day manner, and the format was set accordingly. But d3 does not understand that. When drawing the grid it divides the max-min/someValue and the grid ticks does not have to occur on full day (midnight), but on any hour. And because of the formatting I could not see that.

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

我写了另一个 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');
    }
  }

请注意，您也可以随时间执行此操作，只需附加到 'numeric date'。

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

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

NVD3 Line chart tics wrongly aligned to grid when using datetype on xAxis

javascript

angularjs

nvd3.js

angular-nvd3