[英]how to format time on xAxis use d3.js
According the demo on http://bl.ocks.org/mbostock/3883245根据http://bl.ocks.org/mbostock/3883245上的演示
I don't know how format time on xAxis我不知道如何在 xAxis 上格式化时间
this is my code : js:这是我的代码:js:
var data = [{ "creat_time": "2013-03-12 15:09:04", "record_status": "ok", "roundTripTime": "16" }, { "creat_time": "2013-03-12 14:59:06", "record_status": "ok", "roundTripTime": "0" }, { "creat_time": "2013-03-12 14:49:04", "record_status": "ok", "roundTripTime": "297" }, { "creat_time": "2013-03-12 14:39:06", "record_status": "ok", "roundTripTime": "31" },{ "creat_time": "2013-03-12 14:29:03", "record_status": "ok", "roundTripTime": "0" }]; var margin = {top: 20, right: 20, bottom: 30, left: 50}; var width = 960 - margin.left - margin.right; var height = 500 - margin.top - margin.bottom; var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse; var x = d3.time.scale() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); var line = d3.svg.line() .x(function(d) { return x(d.creat_time); }) .y(function(d) { return y(d.roundTripTime); }); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); data.forEach(function(d) { d.creat_time = parseDate(d.creat_time); d.roundTripTime = +d.roundTripTime; }); x.domain(d3.extent(data, function(d) { return d.creat_time; })); y.domain(d3.extent(data, function(d) { return d.roundTripTime;})); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("return time(ms)"); svg.append("path") .datum(data) .attr("class", "line") .attr("d", line);
this is svg:这是 svg:
In svg , time is 12-hour clock ,but in my data time is 24-hour clock .在 svg 中,时间是 12 小时制,但在我的数据中时间是 24 小时制。 how to keep the same format on svg and data?
如何在 svg 和数据上保持相同的格式?
Any help is appreciated.任何帮助表示赞赏。 (ps:I hope you don't mind my English,it's so bad.)
(ps:我希望你不要介意我的英语,它太糟糕了。)
You can use the tickFormat function on the axis object as below您可以在轴对象上使用 tickFormat 函数,如下所示
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%H"));
The %H
specifies hour (24-hour clock) as a decimal number [00,23]
. %H
hour (24-hour clock) as a decimal number [00,23]
指定hour (24-hour clock) as a decimal number [00,23]
。 Check this link D3 time formatting for more information检查此链接D3 时间格式以获取更多信息
You can check out a working example in this tributary 24hr time example您可以在这个支流24 小时时间示例中查看一个工作示例
The accepted answer is indeed correct, but in my case, I needed the flexibility for the formats to adjust to different scales (think zooming), but also to ensure the 24hr clock is used.接受的答案确实是正确的,但就我而言,我需要灵活地调整格式以适应不同的比例(想想缩放),同时还要确保使用 24 小时时钟。 The key is to define a multi-resolution time format .
关键是定义一个多分辨率的时间格式。 See the Documentation page for details.
有关详细信息,请参阅文档页面。
My code:我的代码:
var axisTimeFormat = d3.time.format.multi([
[".%L", function(d) { return d.getMilliseconds(); }],
[":%S", function(d) { return d.getSeconds(); }],
["%H:%M", function(d) { return d.getMinutes(); }],
["%H:%M", function(d) { return d.getHours(); }],
["%a %d", function(d) { return d.getDay() && d.getDate() != 1; }],
["%b %d", function(d) { return d.getDate() != 1; }],
["%B", function(d) { return d.getMonth(); }],
["%Y", function() { return true; }]
]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(axisTimeFormat);
I want to add this link to an awesome demo page.我想将此链接添加到一个很棒的演示页面。 It is a playground when you can choose what a format specifier do you need for your case.
当您可以选择您的案例需要什么格式说明符时,这是一个游乐场。 It is very useful when you do not remember/know what a format specifier you should pass to your
d3.timeFormat
function.当您不记得/不知道应该传递给
d3.timeFormat
函数的格式说明符时,它非常有用。
I also want to notice, that if you have d3 version 4, you should use d3.timeFormat
function, instead of d3.time.format
.我还想注意,如果你有 d3 版本 4,你应该使用
d3.timeFormat
函数,而不是d3.time.format
。
In v4,在 v4 中,
...
var scaleX = d3.scaleTime().range([0, width]);
var axisBottom = d3.axisBottom(scaleX)
.ticks(d3.timeMinute, 10); // Every 10 minutes
...
Note that use d3.timeMinute
- not d3.timeMinutes
请注意,使用
d3.timeMinute
- 而不是d3.timeMinutes
For a multi-resolution time format in d3 v4 and above, d3.time.multi
has been deprecateed.对于 d3 v4 及更高版本中的多分辨率时间格式,
d3.time.multi
已被弃用。 Instead, define the formats yourself and use a ternary to detect the correct time, using time intervals .相反,自己定义格式并使用三元来检测正确的时间,使用时间间隔。
var formatMillisecond = d3.timeFormat(".%L"),
formatSecond = d3.timeFormat(":%S"),
formatMinute = d3.timeFormat("%I:%M"),
formatHour = d3.timeFormat("%I %p"),
formatDay = d3.timeFormat("%a %d"),
formatWeek = d3.timeFormat("%b %d"),
formatMonth = d3.timeFormat("%B"),
formatYear = d3.timeFormat("%Y");
function multiFormat(date) {
return (d3.timeSecond(date) < date ? formatMillisecond
: d3.timeMinute(date) < date ? formatSecond
: d3.timeHour(date) < date ? formatMinute
: d3.timeDay(date) < date ? formatHour
: d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek)
: d3.timeYear(date) < date ? formatMonth
: formatYear)(date);
}
When calling an time interval like d3.timeDay(date)
, it will floor the current date to the day, week and so on.当调用像
d3.timeDay(date)
这样的时间间隔时,它会将当前日期d3.timeDay(date)
为天、周等。
If the floored date is equal to the current date, then d3.timeSecond(date) < date
will be false.如果
d3.timeSecond(date) < date
日期等于当前日期,则d3.timeSecond(date) < date
将为假。 But if it's smaller (that means, you could floor the date) then it's true and we use the formatter.但是如果它更小(这意味着,你可以把日期打倒)那么它是真的,我们使用格式化程序。
In practice:在实践中:
var d = new Date(2020,1,2) // 2020-02-02T00:00
// floor to nearest second
d3.timeSecond(d) // 2020-02-02T00:00, date gets floored but is equal to date
// after flooring, since it already was :00 seconds
d3.timeSecond(d) < d // equal so false, move on to next precision
// ...
// floor to nearest month
d3.timeMonth(d) // 2020-02-01T00:00, date gets floored to months
d3.timeMonth(d) < d // floored date is now smaller, so true, and use month formatter
Code from d3-time-format .来自d3-time-format 的代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.