如何在d3.js中創建一個自定義軸格式化程序幾小時和幾分鐘？

我有一個數據集，我用d3.js繪圖。 x軸表示時間（以分鐘爲單位）。我想以hh:mm的格式顯示此軸，並且我無法在d3中找到乾淨的方法。如何在d3.js中創建一個自定義軸格式化程序幾小時和幾分鐘？

我軸線的代碼如下所示：

svg.append('g') 
    .attr('class', 'x axis') 
    .attr('transform', 'translate(0,' + height + ')') 
    .call(d3.svg.axis() 
    .scale(x) 
    .orient('bottom'));

其中以分鐘爲單位，看起來像[100, 115, 130, 140]生成標籤等

我目前的解決辦法是選擇text元素生成之後，他們並用函數覆蓋它們：

svg.selectAll('.x.axis text') 
    .text(function(d) { 
     d = d.toFixed(); 
     var hours = Math.floor(d/60); 
     var minutes = pad((d % 60), 2); 
     return hours + ":" + minutes; 
    });

此輸出軸蜱像[1:40, 1:55, 2:10]等。

但是，這種感覺很笨拙，並且避免使用d3.format。有沒有更好的方法來製作這些標籤？

來源

2012-07-02 matthewsteele

如果你有絕對時間，你可能希望你的X數據轉換爲JavaScript Date objects，而不是簡單的數字，然後你想使用d3.time.scale和d3.time.format。的例子「HH：MM」爲座標軸的格式是：

d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .tickFormat(d3.time.format("%H:%M"));

而實際上，你可能不需要在所有指定蜱格式;取決於您的規模的領域和蜱的數量，default time scale format可能已經足夠滿足您的需求。或者，如果您想完全控制，還可以指定刻度的刻度間隔。例如，每15分鐘蜱，你可能會說：

d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .ticks(d3.time.minutes, 15) 
    .tickFormat(d3.time.format("%H:%M"));

如果你有相對時間，即持續時間，（因此有代表分鐘數而不是絕對日期），你可以格式化這些作爲日期選擇一個任意時代並在飛行中轉換。這樣你可以將數據本身保存爲數字。例如：

var formatTime = d3.time.format("%H:%M"), 
    formatMinutes = function(d) { return formatTime(new Date(2012, 0, 1, 0, d)); };

因爲只有分鐘和小時都會顯示出來，這不要緊，你選擇什麼樣的時代。下面是使用這種技術來格式化持續時間的分佈的例子：

http://bl.ocks.org/3048166

來源

2012-07-02 01:57:25 mbostock

，我想我應該提到，我的用例是直方圖（與表示時間的分級對象）。我很確定這是一個有序的規模，但我一直無法完成這項工作。也許我只是混合了不兼容的概念？這裏是我的代碼（軸在底部）：http://pastebin.com/Wkcexcgr – matthewsteele

我編輯了我的答案，並添加了一個示例，顯示如何結合持續時間直方圖使用第二種技術。 – mbostock

這是做到了。感謝你的幫助！真的很驚訝你已經建立了什麼。 – matthewsteele

如何在d3.js中創建一個自定義軸格式化程序幾小時和幾分鐘？

回答

相關問題