javascript - d3 自定义日期格式

Question

我收到了客户的请求，要求使用折线图制作项目燃尽图。问题是他们希望 x 轴上的日期以特定方式格式化 mmm dd-dd/yy（例如 Nov 18-24/12），其中 18-24 是一周（18 日到 24 日）。是否可以在 D3 中创建自定义日期格式，如果没有，最好的方法是什么？

Answer 1

是的，您可以创建自定义日期格式。

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 。

Answer 2

是的，这是可能的。请参阅上的文档d3.time.format。

Answer 3

过去，当涉及非常规格式时，我使用 javascript 对日期进行排序/格式化，然后将值发送到 D3。

我用过date.js。它是一个较旧的 js 库，但它可以完成工作并且提供多种格式。

Answer 4

我创建了自己的格式说明符“%o”

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

在 d3.v2.js 文件中的第 6824 行附近。不是最干净的实现，但它有效。