NVD3线图上抽动使用XAXIS时datetype错误对齐网格 [英] NVD3 Line chart tics wrongly aligned to grid when using datetype on xAxis
问题描述
目前与我NVD3工作采用了棱角分明指令（角nvd3）。我有一个非常简单的折线图非常简单的数据。
I am currently working with NVD3 using Angular Directive (angular-nvd3). I have a very simple line chart with very simple data.
我现在遇到的问题是，我的数据被错误地与轴对准示例plunker可以在这里找到：的 http://plnkr.co/edit/jWEYt6?p=$p$pview ，
The problem I have encountered now is that my data is wrongly aligned with the Axis. Example plunker available here: http://plnkr.co/edit/jWEYt6?p=preview ,
我是用我的X轴，它使用的是D3库解析日期：
I am using dates on my xAxis, which are parsed using d3 library:
tickFormat: function(d) {return d3.time.format('%d/%m')(new Date(d))}
说明：
的我希望x轴的标签是对应于网格中。的
的在这个例子中，你可以清楚地发现，x轴是不是均匀devided（值：06/11，08/11，11/11，13/11）的。所以平时2天，有时三日游：）
In the example you can clearly notice that the xAxis is not evenly devided (values: 06/11, 08/11, 11/11, 13/11). So usually 2 days and sometimes 3 days :)
的更糟糕的是 - 峰不配套电网。例：06/11蜱是真的甚至还没有接近电网的线，我想这应该是的
我也试过这种对从回购硕士 code和它发生也有。有一个在HTML头部分的链接。
I have also tried this on master's code from repo and it happens there too. There is a link in the HTML head section.
是否与我的数据，正确的日期格式或别的什么问题呢？谢谢！
Is there a problem with my data, proper date formatting or something else? Thanks!
推荐答案
这窃听我一会儿，我无法在这里找到答案。我甚至都开一个bug在GitHub上： https://github.com/novus/ nvd3 /问题/ 1382＃issuecomment-160694559 ，我是在避让的答案。
This bugged me for a while and I could not find an answer here. I even have opened a bug on GitHub: https://github.com/novus/nvd3/issues/1382#issuecomment-160694559 and I was clued in on the answer.
问题：
实际的问题是，因为 d3.time.format隐藏（％D /％M'）。我的示例数据以每天方式一个刻度定，格式被相应地设置。但 D3 不明白这一点。当绘制网格是分最大值 - 最小值/ someValue中和网格蜱不具备全日午夜发生，但在任何时间。而且因为格式化，我不能看到这一点。
The actual issue is hidden because of d3.time.format('%d/%m'). My example data is given in one tick per day manner, and the format was set accordingly. But d3 does not understand that. When drawing the grid it divides the max-min/someValue and the grid ticks does not have to occur on full day (midnight), but on any hour. And because of the formatting I could not see that.
显示这种误解的版本是在这里： http://plnkr.co/edit / 2iMHOp？p = preVIEW
The version showing this misconception is here: http://plnkr.co/edit/2iMHOp?p=preview
解决方案：
所以，现在，当我知道我能做什么，我设法在nvd3 /角包装使用 tickValues 参数来替代刻度。
与溶液中的版本是在这里：
http://plnkr.co/edit/23n3ll?p=$p$pview
So now, when I know what I could do, I managed to substitute the ticks by using tickValues parameter in nvd3 / angular wrapper.
The version with the solution is here:
http://plnkr.co/edit/23n3ll?p=preview
另一个错误：）
有趣的是，由于标签太长显示，我不得不旋转他们，使他们能适应。另一个错误发生在这里（我认为）。正如你所看到的第二的和的倒数第二个的刻度标签丢失。首先，我尝试使用该解决方案在这里提到： NVD3线图X坐标蜱缺少使用 showMaxMin 参数，但它不能正常工作。但是，如果你旋转标签〜 -70 度标签显示确定。
Funny thing is that since the labels are too long to be displayed, I had to rotate them so they could fit. Another bug occurs here (I think). As you can see 2nd and last but one tick label is missing. First I tried using the solution mentioned here: NVD3 Line Chart X Axis Ticks Are Missing using the showMaxMin parameter but it does not work correctly. But if you rotate the labels to ~ -70 degrees the labels are displayed OK.
我想这是不是结束我的旅程NVD3;）
I guess this is not the end with my NVD3 journey ;)
这篇关于NVD3线图上抽动使用XAXIS时datetype错误对齐网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
