了解 nvd3 x 轴日期格式 [英] Understanding nvd3 x-axis date format

问题描述

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

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

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

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

谢谢

推荐答案

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

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

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

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:

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 代码会返回您想要的格式，但您可以轻松获得您想要的格式:

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('%m/%d/%Y')(new Date(d));

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

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 MDN page. You can check this your self by typing new Date(1025409600000) at the console.

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

To get D3 to recognise your date 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.

创建您需要的时间格式:

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.

希望能帮到你

这篇关于了解 nvd3 x 轴日期格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！