[英]D3 - format elapsed time
I'm new to d3.js but I really think this is a really powerful tool.我是 d3.js 的新手,但我真的认为这是一个非常强大的工具。
My problem today is formatting the time ticks.我今天的问题是格式化时间刻度。
I am having a live chart plotted with d3v5, with the time in the x-axis.我有一个用 d3v5 绘制的实时图表,时间在 x 轴上。 The time is coded in milliseconds since the start of the page (time=0 after loading).自页面开始以来的时间以毫秒为单位编码(加载后时间=0)。 I would like the ticks to show 15s,30s,45s,:1,15s,30s,45s,:2,and so on.我希望刻度显示 15s、30s、45s、:1、15s、30s、45s、:2 等等。
My problem is, using the scaletime function, I actually end up with the year 1970 shown at the start.我的问题是,使用 scaletime function,我实际上最终以 1970 年开头。
Can anyone guide me?谁能指导我? I have started to look at the formattick function, but didn't end up finding a way to do what I wish.我已经开始查看格式标签 function,但最终没有找到一种方法来做我想做的事。
Can anyone show me a direction?谁能告诉我一个方向?
Thank you,谢谢,
I managed to find a solution by myself in the end.我最终设法自己找到了解决方案。
I have changed my scale from timescale to scalelinear.我已将我的比例从时间比例更改为比例线性。 I have created a function that return the proper d3.format value based on an input integer我创建了一个 function,它根据输入 integer 返回正确的 d3.format 值
var TimeFormatLive = function(d) {
if (d < 0) {//checking a condition based on that do foarmat
//provide a format
return '';
}
else if (d ==0){
//provide some other format
return ":" + d3.format(".0f")(d/1000);
}
else if (d % (3600*1000)==0){
//provide some other format
return d3.format(".0f")(d/(3600*1000)) + "h";
}
else if (d % (60*1000)==0){
//provide some other format
return d3.format(".0f")((d /(1000*60)) % 60) + "min";
}
else {
//provide some other format
return ":" + d3.format(".0f")((d/1000) % 60 ) ;
}
};
I then apply this "filter" to my.tick object然后我将此“过滤器”应用于 my.tick object
.call(d3.axisBottom(x).ticks(15).tickFormat(TimeFormatLive)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.