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

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实际上甚至不接近网格线,我猜它应该是.

我也尝试过master's来自repo的代码,它也发生在那里.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

解:

所以现在,当我知道自己能做什么时,我设法用tickValuesnvd3/angular wrapper中的参数替换了滴答.解决方案的版本在这里:http: //plnkr.co/edit/23n3ll？p = preview

还有一个bug :)

有趣的是,由于标签太长而无法显示,我不得不旋转它们以便它们适合.这里发生了另一个错误(我认为).你可以看到第二个和最后一个,但缺少一个刻度标签.首先,我尝试使用此处提到的解决方案:NVD3折线图X轴刻度线缺少使用showMaxMin参数,但它无法正常工作.但是,如果将标签旋转到〜-70度,则标签显示为OK.

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