NVD3在xAxis上使用日期类型时，折线图错误地与网格对齐

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

本文关键字：错误 折线图 对齐 网格 类型 xAxis 日期 NVD3      更新时间：2023-09-26

我目前正在使用Angular Directive（Angular-NVD3）处理NVD3。我有一个非常简单的折线图，数据非常简单。

我现在遇到的问题是我的数据与Axis错误对齐此处提供的示例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 tick实际上甚至没有靠近网格线，我想它应该在那里。

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

我的数据、正确的日期格式或其他方面有问题吗？谢谢

这困扰了我一段时间，我在这里找不到答案。我甚至在GitHub上打开了一个bug：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参数来替换ticks。带有解决方案的版本如下：http://plnkr.co/edit/23n3ll?p=preview

还有一个错误：）

有趣的是，由于标签太长，无法显示，我不得不旋转它们，这样它们才能放得下。这里发生了另一个错误（我想）。正如您所看到的，第二个和最后一个tick标签缺失。首先，我尝试使用这里提到的解决方案：使用showMaxMin参数的NVD3折线图X轴刻度缺失，但它无法正常工作。但如果将标签旋转至~-70度，则标签显示正常。

我想我的NVD3之旅还没有结束；）

由于问题是，根据Atais:

由于d3.time.format（'%d/%m'），实际问题被隐藏。我的示例数据以每天一次的方式给出，并且相应地设置了格式。但d3并不理解这一点。绘制网格时，它会划分最大最小值/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轴，因此无法很好地处理不同月份的日期

相关文章：