Javascript 在xAxis上使用datetype时，NVD3折线图错误地与网格对齐

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

我现在遇到的问题是，我的数据与轴对齐错误。此处提供的示例plunker:

我在xAxis上使用日期，使用d3库解析日期：

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

说明：

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

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

更糟糕的是，峰值与网格不匹配。示例：06/11滴答声甚至不接近网格线，我猜它应该在那里

我也在回购协议的

master's

code上尝试过这一点，这种情况也发生在那里。HTML标题部分中有一个链接

---

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

这个问题困扰了我一段时间，我在这里找不到答案。我甚至在GitHub上打开了一个bug：我已经找到了答案

---

问题：

由于

d3.time.format（“%d/%m”）

，实际问题被隐藏。我的示例数据以每天一个刻度的方式给出，并相应地设置了格式。但是d3不明白这一点。绘制网格时，它将

max-min/someValue

分开，网格刻度不必在全天（午夜）出现，而是在任何时间出现。由于格式的原因，我看不到这一点

显示这种误解的版本如下：

---

解决方案：

所以现在，当我知道我能做什么时，我设法通过使用nvd3/angular包装器中的

tickValues

参数来替换刻度。 解决方案的版本如下所示：

---

还有一个错误：）

有趣的是，由于标签太长，无法显示，我不得不旋转它们，这样它们才能适合。另一个错误发生在这里（我想）。如您所见，第二个也是最后一个，但缺少一个勾号标签。首先，我尝试使用这里提到的解决方案：使用

showMaxMin

参数，但它不能正常工作。但如果将标签旋转到~

-70

度，则标签显示正常

---

我想这不是我NVD3旅程的终点；）

由于问题是，根据Atais：

实际问题由于d3.time.format（“%d/%m”）而隐藏。我的示例数据以每天一个刻度的方式给出，并相应地设置了格式。但d3并不明白这一点。绘制网格时，它将“最大-最小/某些”值除以，网格刻度不必在全天（午夜）出现，而是在任何时间出现。由于格式的原因，我看不到这一点

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

tickFormat

上格式化以正确显示

我写了另一篇关于这个问题和已评论的解决方案的文章（使用momentjs）：

---

带模拟错误的冲击器：

数据以

x:ms，y:int

格式提供，如

{x:1446418800000，y:20}，

，并使用

tickFormat

格式格式化：

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

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

---

用解决方案扑通一声：

数据以

x:int，y:int

的格式提供，如

{x:20160211，y:20}，

，并且正在使用

tickFormat

格式化：

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

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

---

请注意，您也可以通过添加“数字日期”来处理时间

---

如@ajaybc所述，将不能很好地处理不同月份的日期，因为d3将用无效的填充日期（第32天、第33天、第34天等等）插值X轴。

哇，太棒了！好吧，这一次的走动肯定需要我这边的注意！虽然这可以从理论上回答这个问题，但在这里包括答案的基本部分，并提供链接供参考。各位理解，我第一次在这里回答：p批准了你们的编辑@Atais@StefB. 当日期来自不同的月份时，这将不起作用。D3将尝试在我们提供的值之间插入X值。导致创建无效的日期值，如“20160241”。我修改了您的示例小提琴，以证明@ajaybc是的，这是真的。已经在答案中添加了警告说明。谢谢你的洞察力。你用这个解决方案救了我一天。现在，我有另一个问题。我更新了你的电脑，让你看看。我删除了以勾选（在我的情况下，我只是没有这些天的数据。现在，勾选之间有空格。我如何避免它？我建议您在后端准备数据，将缺少的天添加为0值。这就是我所做的：）这是我的第一个想法，但很难看：（这是有道理的，应该是一个属性来避免它。我会问一个新的问题，如果我能得到答案，我会把它张贴在这里。无论如何，谢谢.）。。