d3.js默認axis.tickFormat 24小時時鐘

我真的很喜歡axis.tickFormat的默認行爲，隨着時間的推移繪製當事情，只是創建我x軸是這樣的：d3.js默認axis.tickFormat 24小時時鐘

var xAxisBottom = d3.svg.axis().scale(xScale);

我使用畫筆功能，以便用戶可以沿着x軸進行縮放，因此它的值必須相應更新。如果用戶查看整年的數據，則用月數表示是好的。如果用戶在一天內查看數據，則小時和分鐘的滴答是好的。等等。

好的是軸的默認行爲是這樣的。不好的一面是它顯示AM/PM的小時數，我想將其改爲24小時制。

我知道我可以基於畫筆的當前範圍設置我自己的tickFormat，但在這種情況下，我不知道如何獲取類似下面的圖片，其中混合了不同的格式。

enter image description here

那麼，有沒有一種簡單的方法來獲取24小時制，而不是AM/PM？

來源

2013-03-27 Joel

不像在「調用一行代碼」中那麼容易，但是您可以將自己的時間格式足夠簡單。例如，請參閱here。關鍵的想法是，你有一個日期格式列表和一個過濾器函數，如果使用相關的格式，給定一個日期，返回true。在你的情況下，你只需要兩個級別，一個顯示日期（如果日期是午夜）或時間（如果日期是中午12點）。

來源

2013-03-27 08:54:43

啊奧基，謝謝你的例子。我真的不知道如何讓每個單獨的tick都有一個有條件的時間格式。在我的情況下，我必須根據時間跨度改變蜱的格式，所以我不會只需要兩個級別，但我想這樣的事情也可以覆蓋我的情況。 – Joel 2013-03-27 09:06:17

對不起，沒有意識到這實際上正是我需要的:)。我只需要改變一些格式 – Joel 2013-03-27 09:12:16

值得注意的是，如果您在座標軸上使用UTC時間而不是當地時間，那麼d3會在內部調用一組不同的格式器。您需要：

  return (d3.utcSecond(date) < date ? formatMillisecond 
      : d3.utcMinute(date) < date ? formatSecond 
      : d3.utcHour(date) < date ? formatMinute 
      : d3.utcDay(date) < date ? formatHour 
      : d3.utcMonth(date) < date ? (d3.utcWeek(date) < date ? formatDay : formatWeek) 
      : d3.utcYear(date) < date ? formatMonth 
      : formatYear)(date);

而不是上面鏈接示例中引用的調用。此更改將替換爲「d3。時間 XXX（日期）」中的「d3。utc XXX（date）」。

來源

2017-02-04 18:10:55

d3.js默認axis.tickFormat 24小時時鐘

回答

相關問題