Question

我目前正在使用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头部分中有一个链接。

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

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 wrapper中使用tickValues参数替换了刻度。解决方案的版本在这里： http://plnkr.co/edit/23n3ll?p=preview

又一个错误：）

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

我想这不是我的NVD3之旅的结束;）

Answer 2

问题是，根据Atais：

由于d3.time.format（'％d /％m'），实际问题已隐藏。我的示例数据以每天一个刻度的方式给出，并且相应地设置了格式。但是d3并不理解这一点。绘制网格时，它会划分max-min / someValue，并且网格刻度不必在全天（午夜）发生，而是在任何一小时。由于格式化，我无法看到。

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

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

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

数据以tickFormat格式提供，与x: milliseconds, y: int一样，并且正在与{x: 1446418800000, y: 20},格式化：

tickFormat

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

数据以xAxis: { tickFormat: function(d) { return moment(d).format('YYYY-MM-DD'); } }格式提供，与x: int, y: int一样，并且正在与{x: 20160211, y: 20},格式化：

tickFormat

请注意，您也可以按时间进行操作，只需附加到“数字日期”。

如@ajaybc所述，对于不同月份的日期不会很好，因为d3将插入X轴，填充日期无效（第32,33,34天等）

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

2 个答案: