Javascript d3自定义日期格式
我收到一位客户的请求,要求使用折线图绘制项目耗竭图。问题是,他们希望x轴上的日期以特定方式格式化,即mmm dd/yy(例如,2012年11月18日至24日),其中18-24是一周(18日至24日)。是否可以在D3中创建自定义日期格式,如果不可以,最好的方法是什么?是的,这是可能的。请参阅。过去,我使用javascript对日期进行排序/格式化,然后在涉及非常规格式时将值发送到D3Javascript d3自定义日期格式,javascript,d3.js,Javascript,D3.js,我收到一位客户的请求,要求使用折线图绘制项目耗竭图。问题是,他们希望x轴上的日期以特定方式格式化,即mmm dd/yy(例如,2012年11月18日至24日),其中18-24是一周(18日至24日)。是否可以在D3中创建自定义日期格式,如果不可以,最好的方法是什么?是的,这是可能的。请参阅。过去,我使用javascript对日期进行排序/格式化,然后在涉及非常规格式时将值发送到D3 我用过。这是一个较旧的js库,但它完成了任务,并提供了多种格式。是的,您可以创建自定义日期格式 var xAxis
我用过。这是一个较旧的js库,但它完成了任务,并提供了多种格式。是的,您可以创建自定义日期格式
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实现内置格式化程序一样实现完整的格式化程序。请参阅以获取该示例。我创建了自己的格式说明符“%o”
在d3.v2.js文件的第6824行附近。虽然不是最干净的实现,但它可以工作。我在前面查看了它,但我没有看到一个说明符可以帮助我实现日期格式的开始和结束日期要求(18-24)。您需要分两部分来完成这项工作——一个做开始部分(月-日)的格式并获取一周的开始日期和一种格式,该格式获取一周的结束日期并生成(天/年)。就我所知,没有任何东西可以提供您想要的现成功能。有几种方法可以创建您自己的日期格式函数,而无需编辑d3.js代码本身(我在回答中介绍了两种方法)。这样做是绝对不推荐的。如果你将来更新d3,你将失去此功能,这可能会意外中断你的应用程序。因为你似乎只有一个勾号格式,我只会使用与我在回复中发布的代码类似的代码。只需根据传递到
customDateFormat
%L-毫秒的日期返回所需的字符串作为十进制数字[000999]。
per
o: function(d) {
var weekInSeconds = 6 * 86400000;
var eowDate = new Date(d.getTime() + weekInSeconds);
return d3_time_zfill2(eowDate.getDate());
},