d3自定義日期格式

我收到了客戶對於項目burndown圖表使用折線圖的請求。問題是他們希望x軸上的日期以特定的方式格式化。mmm dd-dd/yy（例如11月18-24/12）其中18-24是一週（從第18天到第24天）。有沒有可能在D3中創建一個自定義的日期格式，如果不是最好的方式來完成這一點？d3自定義日期格式

來源

2012-12-05 user1441287

-1

我又可以在d3.v2.js文件中創建自己的格式說明「％o」的

o: function(d) { 
    var weekInSeconds = 6 * 86400000; 
    var eowDate = new Date(d.getTime() + weekInSeconds); 
    return d3_time_zfill2(eowDate.getDate()); 
},

左右線6824。不是最乾淨的實現，但它的工作原理。

來源

2012-12-13 16:15:09 user1441287

有幾種方法可以創建自己的日期格式函數，而無需編輯d3.js代碼本身（我在答案中顯示了兩種方法）。這樣做是絕對不推薦。如果您將來更新d3，則會失去此功能，這可能會意外破壞您的應用。 – Bill

在你的例子中是「L」自定義格式說明符？ – user1441287

由於您似乎只有一個刻度格式，因此我只會使用與我在回覆中發佈的代碼類似的代碼。只需根據傳入'customDateFormat'的日期返回所需的字符串即可。 – Bill

是的，這是可能的。見the documentation on d3.time.format。

來源

2012-12-05 15:36:28

我之前在看，並沒有看到一個說明符，它可以幫助我實現日期格式的開始和結束日期要求（18-24）。 – user1441287

您需要分兩部分來完成此操作 - 一種格式用於開始部分（月份日期），並採用星期開始日期和格式，以一週結束並生成（日/年）。據我所知，沒有什麼能夠給你開箱即用的東西。 –

我已經使用javascript對日期進行排序/格式化，然後在非常規格式中將值發送到D3。我使用date.js。這是一個較老的js庫，但它完成了工作，它提供了多種格式。

來源

2012-12-05 15:39:37 user1783490

是的，您可以創建自定義日期格式。

var xAxis = d3.svg.axis() 
    .scale(x) 
    .tickFormat(customDateFormat); 

function customDateFormat(date) { 
    // figure out what week the current date is in 
    // and return the appropriate string 
}

如果你想成爲更炫，可以實現在d3.js實現內置的格式相同的方式進行全面的格式。有關這方面的示例，請參見http://bl.ocks.org/4149176。

來源

2012-12-10 02:56:16 Bill

d3自定義日期格式

回答

相關問題