问题 了解nvd3 x轴日期格式


如何将日期(x xAxis)格式化为“1025409600000”?我一直在研究他们的文档,但无法弄清楚它是如何工作的,如果有人帮助我理解如何将其更改为“正常”日期格式,如MMDDYYYY,它将使我的生活更轻松

这是图表: http://nvd3.org/ghpages/stackedArea.html

文档: https://github.com/mbostock/d3/wiki/Time-Formatting

谢谢


4829
2017-10-18 21:58


起源

您链接的示例向您展示了如何使用其他格式。你能给我们一个你遇到麻烦的具体例子吗? - Lars Kotthoff
我无法理解如何将数据输入到图表中,我现在明白它当前正在读取的数据是在Unix Epoch时间。我宁愿这是一个人类可读的格式,如MMDDYYYY。试图了解我必须做出哪些更改才能使代码以易于读/写的格式读取和绘制数据(不是unix纪元时间) - Sina H


答案:


我已将您的问题解释为1025409600000如何格式化为MMDDYY,因为这是NV示例中发生的情况。

在您指向x轴的示例中,日期几乎采用您想要的格式%m /%d /%Y(或MMDDYY)x轴日期的格式如下:

chart.xAxis
     .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });

所以 d3.time.format('%x') 指定从中返回的日期的格式 (new Date(d))。您指出的文档让我们知道格式是什么,那就是 %x  - 日期,为“%m /%d /%Y” 似乎正在回归“%m /%d /%ÿ“。在阅读完文档后,我原本期望NV代码会返回您所使用的格式,但您可以轻松获得以下格式:

d3.time.format('%m/%d/%Y')(new Date(d));

new Date(d) 获取日期数据并将其转换为javascript日期。 NV示例中的日期数据是自1970年1月1日00:00:00 UTC(Unix Epoch)以来的毫秒数 - 请参阅此 MDN 页。您可以通过键入来检查自己 new Date(1025409600000) 在控制台。

让D3识别 你的 日期格式是%m /%d /%Y还是您需要创建时间格式然后解析日期数据的任何其他内容。这将在您提供链接的D3时间格式页面中介绍,我将根据您的示例调整其中的内容。

创建您需要的时间格式:

var format = d3.time.format("%m/%d/%Y");

以及用于解析数据的用法:

format.parse(d.Date);

没有你的代码,我不能确切地说出它需要去的地方,但它应该非常清楚。您也可以在控制台上试一试。

希望这可以帮助


13
2017-10-19 07:46



这有很多帮助,但我想要了解的是如何将代码更改为 读 %m /%d /%y格式,我正在尝试将数据输入到此图表中,而不是必须将我的日期数据转换为Unix Epoch以将其提供给图表。你知道如何切换它读取数据的格式吗?非常感谢 - Sina H
我编辑了我的回复以涵盖这一点 - user1614080
嗨@ user1614080,如果我的数据库中有日期数据并格式化为,该怎么办? 2016-04-28。如何将其转换为类似的东西 1025409600000 格式适合图表? - Lekz Flores