僅使用小時和上D3.js

x軸分鐘，我有一個數據集，看起來像這樣：僅使用小時和上D3.js

data_set=[{date: '2012,09,04,10,54,53'}, 
{date: '2012,09,05,10,58,57'}, 
{date: '2012,09,11,10,44,05'}, 
{date: '2012,09,04,11,25,30'}, 
{date: '2012,09,04,10,28,55'}, 
{date: '2012,09,04,12,30,17'}, 
{date: '2012,09,04,11,14,23'}, 
{date: '2012,09,04,12,16,10'}, 
{date: '2012,09,04,11,57,46'}, 
{date: '2012,09,04,11,15,53'}, 
{date: '2012,09,04,11,25,43'},];

我試圖做一個散點圖其中X軸是時間一天，而不是完整的日期。如何讓x軸僅顯示24個週期，以及如何獲取日期點以沿x軸適當繪圖？聲音我試圖使用d3.time.scale（）或者我應該簡單地使用d3.linear.scale（）並解決格式化問題？我想要做的是每週的每一天都是沿着y軸的不同點。示例圖是here。在這個例子中，10 =星期一，20 =星期二等。不同的符號表示一週中特定日子的月份的不同日期。

所以我寫了下面的功能拉日我的字符串，特別是小時和分鐘：

var date_format = d3.time.format("%Y,%m,%d,%H,%M,%S");                                
var time_format = d3.time.format("%X");

使用這些功能，我寫了下面的語句：

dd = date_format.parse('2012,01,02,12,39,45') 
Mon Jan 02 2012 12:39:45 GMT-0800 (PST) 
time_format(dd) 
"12:39:45"

所以在控制檯中，我可以看到我已經拍攝了一個字符串，將其轉換爲日期，然後使用該日期生成時間。當我嘗試設置域時，d3.time.scale（）似乎不接受我傳遞給它的時間。

http://i.imgur.com/DRtSW.png「完成情節」

來源

2012-10-08 gus

你的數據集爲JSON陣列[...]，包含有鍵值對{date: '...'}對象。

此配對中的值是逗號分隔的字符串。

你可以通過陣列（例如）拉出小時和分鐘值，建立一個新的數據集循環：

var new_data = []; 
for (var idx = 0; idx < data_set.length; idx++) { 
    var datum = data_set[idx]; 
    var date_value = datum.date; 
    var date_elements = date_value.split(","); 
    var hour = date_elements[3]; 
    var minutes = date_elements[4]; 
    var new_date = {}; 
    new_date.date = hour + "," + minutes; 
    new_data.push(new_date); 
};

然後，你可以通過你的D3代碼修改後的數據集new_data，其中只包含小時和分鐘數據。

編輯

如果它是有用的，你可能需要編輯上面的代碼爲new_date對象實例的格式改變的東西，一個D3的功能可以消耗。我老實說不太熟悉API的日期/時間部分，所以可能需要一些更改。我只是試圖以通用的方式展示你可以做什麼來預先處理你的數據數組，用你需要的數據構建一個數組。

來源

2012-10-08 10:31:37

我已經添加到我原來的帖子，基本上我已經使用d3函數將字符串轉換爲日期和日期，但d3.time.scale似乎並不接受它生成的時間。 – gus

亞歷克斯·雷諾：你的意思是

new_date.date = hour + ":" + minutes;

？

此外，您可以使用格式化功能提供時間刻度，格式功能可將刻度格式化爲小時和分鐘。見 https://github.com/mbostock/d3/wiki/Time-Formatting 和 https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickFormat

來源

2012-10-08 17:58:33 Superboggly

是的，我同意我可以格式化日期，但我認爲在這種情況下我仍然卡住，因爲我想要日期在不同的日子（9月1日和9月8日），但一週中的同一天和時間（星期一，上午9點）繪製在x軸的同一點上。 – gus

正確 - 我猜想我正在想象創建日期，但沒有日期部分，所以實際上您正在1970年1月1日的相同（默認）日創建不同時間的日期對象。也許將上述內容替換爲：'new_date。日期=新日期（小時+「：」+分鐘）;'然後使用格式來隱藏所有數據錯誤的事實。 – Superboggly

D3（或可能的JavaScript一般）似乎並沒有做一天的時間非常好，而不需要一個Date對象。我的解決方案是將時間存儲爲自00:00:00以來的整數分鐘（如果我想要精確度，則爲秒）。在幾分鐘內它是一個int 1440

介於0和如果需要從字符串轉換的時間（如「00:00:00」），那麼這可能會有幫助：

time = (parseInt(d.x.split(':')[0]) * 60) + parseInt(d.x.split(':')[1]);

如果你的數據是一個int已經然後在tickformat您可以使用此：

.tickFormat(function(d) { 
    return Math.floor((d)/60) + ":" + ((d)%60); 
});

或

.tickFormat(function(d) { 
    return padZero(Math.floor((d)/60)) + ":" + padZero((d)%60)); 
});

其中padZero是你的自己的功能，填充前導零，以便你不會得到「1:30」或「0：0」，但「01:30」和「00:00」

來源

2014-06-09 09:08:17 Steven

僅使用小時和上D3.js

回答

相關問題