了解 nvd3 x 轴日期格式

Posted 2023-02-22

【中文标题】了解 nvd3 x 轴日期格式

【英文标题】：Understanding nvd3 x-axis date format

【发布时间】：2013-10-27 21:20:12

【问题描述】：

日期（x xAxis）如何格式化为“1025409600000”？我一直在研究他们的文档，但不知道它是如何工作的，如果有人能帮助我了解如何将其更改为“正常”日期格式，例如 MMDDYYYY，这将使我的生活更轻松

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

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

谢谢

【问题讨论】：

您链接到的示例向您展示了如何使用不同的格式。你能举一个你遇到问题的具体例子吗？

我无法理解如何将数据输入到图表中，我现在知道它当前正在读取的数据是在 Unix 纪元时间。我宁愿这是一种人类可读的格式，例如 MMDDYYYY。试图了解我必须对代码进行哪些更改才能以易于读/写的格式读取和绘制数据（不是 unix 纪元时间）

【参考方案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 纪元）以来的毫秒数 - 请参阅此 MDN 页面。您可以通过在控制台输入new Date(1025409600000) 自行检查。

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

创建您需要的时间格式：

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

以及使用它来解析您的数据：

format.parse(d.Date);

如果没有您的代码，我无法准确说明这需要去哪里，但应该很清楚。您也可以在控制台上尝试一下。

希望对你有帮助

【讨论】：

这有很大帮助，但我想了解的是如何将代码更改为 read %m/%d/%y 格式，我正在尝试将数据输入到此图表中，而不必将我的日期数据转换为 Unix Epoch 以将其提供给图表。你知道如何切换它读取数据的格式吗？非常感谢

嗨@user1614080，如果我有来自我的数据库的日期数据并格式化为2016-04-28。如何将其转换为 1025409600000 格式以适应图表？

@LekzFlores 我不知道您使用哪个数据库引擎，但您可以在 Google 上查看如何将您的日期转换为 Unix 时间戳格式，您应该会得到答案。