3

我目前正在使用 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 刻度线实际上甚至不靠近我猜它应该在的网格线。

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

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

4

2 回答 2

6

这困扰了我一段时间，我在这里找不到答案。我什至在 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

解决方案：

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

还有一个错误:)

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

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

于 2015-12-15T10:00:38.640 回答
3

根据Atais的说法，问题是：

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

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

我写了另一个问题和评论的解决方案（使用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 轴

于 2016-02-11T15:58:05.313 回答