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

时间:2015-11-27 14:34:50

标签: javascript angularjs nvd3.js angular-nvd3

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

我的数据,正确的日期格式或其他问题是否有问题?谢谢!

2 个答案:

答案 0 :(得分: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

<强>解决方案:

所以现在,当我知道自己能做什么时,我设法在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之旅的结束;)

答案 1 :(得分:3)

问题是,根据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天等)