了解nvd3 x轴日期格式

Question

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

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

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

谢谢

Answer 1

我已经解释了你的问题,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 /%y ".在阅读完文档后,我原本期望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);

如果没有你的代码,我无法确切地说出它需要去的地方,但它应该非常清楚.您也可以在控制台试试这个.

希望这可以帮助