如何使D3.js使用UTC時間爲X軸，以Moment.js

我使用D3.js來繪製爲x軸的UTC時間刻度可縮放的圖表，如：如何使D3.js使用UTC時間爲X軸，以Moment.js

var axisTimeFormat = d3.time.format.utc.multi([ 
    [".%L", function(d) { return d.getMilliseconds(); }], 
    [":%S", function(d) { return d.getSeconds(); }], 
    ["%I:%M", function(d) { return d.getMinutes(); }], 
    ["%I %p", function(d) { return d.getHours(); }], 
    ["%a %d", function(d) { return d.getDay() && d.getDate() != 1; }], 
    ["%b %d", function(d) { return d.getDate() != 1; }], 
    ["%B", function(d) { return d.getMonth(); }], 
    ["%Y", function() { return true; }] 
]); 

// `minDt` and `maxDt` are Moment.js UTC times: 
var x = d3.time.scale.utc() 
      .domain([minDt, maxDt]) 
      .range([0, width]); 

var xAxis = d3.svg.axis().scale(x) 
       .orient('bottom') 
       .tickSize(-height) 
       .tickFormat(axisTimeFormat);

我的數據使用Moment.js UTC時間。這一切都有效，但問題是無論我放大或縮小多少，刻度總是格式爲「％I％p」。

我在倫敦，在夏令時期間，所以在d3.time.format.utc.multi，d.getHours()將返回要麼1或13，而不是0（這會導致它下跌到下一個時間格式）或12。

看來這些函數中使用的Date對象不再是UTC。即，如果我在他們中的一個做console.log(d)我得到的是這樣的：

Tue May 16 2017 01:00:00 GMT+0100 (BST)

我怎樣才能讓這些使用UTC日期，我使用其他地方？

來源

2017-05-25 Phil Gyford

我沒有看到那一刻在你的代碼在所有。如果你真的通過'yourUtcMomentObject.toDate（）'得到'd'，那麼就不要調用'toDate'。你可以從時刻的獲得者那裏得到這些值，比如'.hour（）'等。 –

'minDt'和'maxDt'，用於產生D3比例，都是Moment時間。但'd'，'d3.time.format.utc.multi（）'中的函數都是標準的JS日期。 –

您可以在axisTimeFormat定義中使用UTC方法。

嘗試

return d.getUTCHours();

更換

return d.getHours();

等

來源

2017-05-25 18:27:23

就是這樣！謝謝！我今天早些時候在我的時區冒險中注意到了這些方法，然後忘記了所有關於它們的內容。 –

如何使D3.js使用UTC時間爲X軸，以Moment.js

回答

相關問題