javascript 了解 nvd3 x 轴日期格式

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19459687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 15:39:34  来源:igfitidea点击:

Understanding nvd3 x-axis date format

javascriptchartsd3.jsnvd3.js

提问by Sina H

how is the date (x xAxis) formatted as "1025409600000"? I have been studying their documentation but can not figure how this works, it would make my life easier if someone would help me to understand how to change this to a 'normal' date format, like MMDDYYYY

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

This is the chart: http://nvd3.org/ghpages/stackedArea.html

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

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

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

Thanks

谢谢

回答by user1614080

I've interpreted your question as how does 1025409600000 get formatted to MMDDYY as that's what's happening in the NV example.

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

In the example you pointed to the x axis has the dates almost in the format you want %m/%d/%Y (or MMDDYY) x axis date is formatted in the following line:

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

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

So the d3.time.format('%x')specifies the format of the date that is returned from (new Date(d)). The documentation you pointed at lets us know what the format will be and that is %x- date, as "%m/%d/%Y"which appears to be returning "%m/%d/%y". After reading the documentation I would have expected that the NV code would return the format you're after but you can easily get the format your after with:

因此d3.time.format('%x')指定了从 返回的日期格式(new Date(d))。您指向的文档让我们知道格式是什么,即%x- 日期,如“%m/%d/%Y”,它似乎返回“%m/%d/% y”。阅读文档后,我原以为 NV 代码会返回您所追求的格式,但您可以通过以下方式轻松获得格式:

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

The new Date(d)takes the date data and converts it to a javascript date. The date data in the NV example is the number of milliseconds since 1 January 1970 00:00:00 UTC (Unix Epoch) -see this MDNpage. You can check this your self by typing new Date(1025409600000)at the console.

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

To get D3 to recognise yourdate format whether that be %m/%d/%Y or anything else you need to create a time format and then parse your date data. This is covered in the D3 Time Formatting page you provided a link to and I'll just adapt what's there to your example.

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

Create the time format you need in:

创建您需要的时间格式:

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

And the use that to parse your data:

并使用它来解析您的数据:

format.parse(d.Date);

Without your code I can't say exactly where this needs to go but it should be pretty clear. You can also try this out at the console.

没有您的代码,我无法确切说出需要去哪里,但应该很清楚。您也可以在控制台上试试这个。

Hope this helps

希望这可以帮助