DC.js X軸小時標籤顯示爲千分之一

使用dc.js構建一些圖表。 localHour屬性包含0到23之間的數字。但是，在我的座標軸上使用此值時，所有數字均以千分之一而不是標準小時數表示。 04 PM也出現在原點。DC.js X軸小時標籤顯示爲千分之一

我該如何解決這個問題？

var hourDim = ndx.dimension(function(d){ return d.hour; }); 
var num = hourDim.group().reduceSum(dc.pluck('count')); 

var mainChart = dc.lineChart("#main"); 

mainChart 
    .width(500).height(200) 
    .dimension(hourDim) 
    .group(num) 
    .x(d3.time.scale().domain([0,24])) 
    .yAxisLabel("Count per Hour")

chart

來源

2014-01-27 arami

你不應該設置範圍嗎？ [一些信息]（http://alignedleft.com/tutorials/d3/scales） – FernOfTheAndes

不確定是否有必要，但添加一個似乎沒有任何可見的變化。 – arami

什麼實際發生在這裏的是你的「小時」的測量正在interpretted爲毫秒。毫秒是默認的JavaScript時間單位，如果你沒有另外指定。具體來說，您可以在Javascript零時間後得到毫秒，這個時間取決於時區調整，這個時間是1969年12月31日或1970年1月1日的某個時間，顯然從您的時區下午4點開始。其餘的只是默認的格式，試圖讓事情看起來不錯。

除非您正在做其他事情需要將小時數作爲時間戳處理，否則使用線性小數位數代替時間小數位可能最簡單。

如果您在軸標籤上使用簡單的舊「1」，「2」，「3」，那就只需要這麼做。

如果您希望這些數字看起來像小時，您需要在圖表軸上設置一個tickFormat函數。

您可能只是像做

mainChart.x(d3.scale.linear().domain([0,24]) 
         .tickFormat(function(h){return h + ":00";}) 
     );

但是，這會產生問題，如果軸決定把蜱在分數值 - 你會得到的東西看起來像1.5：00，而不是1： 30。你可以用一些數學和數字格式化函數來解決這個問題，但是在那個時候你已經做了足夠的工作來使它適合使用適當的日期時間格式。

要獲得適當的小時：分鐘軸標籤，您可以使用d3 time formatting函數來指定格式，但您還必須將小時數轉換爲有效的日期時間對象。

var msPerHour = 1000*60*60; 

var timeFormat = d3.time.format.utc("%H:%M"); 

mainChart.x(d3.scale.linear().domain([0,24]) 
         .tickFormat(function(h){ 
           return timeFormat(new Date(msPerHour*h)); 
         }) 
     );

請注意，我指定的時間格式功能使用UTC時間而不是本地時間，所以它把零午夜。它仍然認爲它是1970年1月1日的午夜，但你也指定格式只包括小時和分鐘，所以不應該是一個問題。

來源

2014-01-28 01:52:25 AmeliaBR

完美！感謝您的徹底解答！ – arami

@Amelia - 是否可以將tickFormat添加到x ..或者是否應該添加到xAxis？（我在添加到x時遇到了一個錯誤）。 –

您將其設置在比例函數對象上，除非最新版本中的內容已更改。 – AmeliaBR

DC.js X軸小時標籤顯示爲千分之一

回答

相關問題