d3.time.format中的时间格式

最新推荐文章于 2025-10-20 19:29:40 发布

转载最新推荐文章于 2025-10-20 19:29:40 发布 · 1.1w 阅读

JS 专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨了日期时间格式符号及其在D3.js图表中的应用，包括如何自定义时间格式以增强数据可视化效果。通过实例演示了如何使用D3.js创建动态时间轴图表，并详细介绍了日期时间格式的组成与D3.js时间格式化的实现过程。

%a - abbreviated weekday name.
%A - full weekday name.
%b - abbreviated month name.
%B - full month name.
%c - date and time, as "%a %b %e %H:%M:%S %Y".
%d - zero-padded day of the month as a decimal number [01,31].
%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to%_d.
%H - hour (24-hour clock) as a decimal number [00,23].
%I - hour (12-hour clock) as a decimal number [01,12].
%j - day of the year as a decimal number [001,366].
%m - month as a decimal number [01,12].
%M - minute as a decimal number [00,59].
%L - milliseconds as a decimal number [000, 999].
%p - either AM or PM.
%S - second as a decimal number [00,61].
%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53].
%w - weekday as a decimal number [0(Sunday),6].
%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53].
%x - date, as "%m/%d/%Y".
%X - time, as "%H:%M:%S".
%y - year without century as a decimal number [00,99].
%Y - year with century as a decimal number.
%Z - time zone offset, such as "-0700".
%% - a literal "%" character.

<!DOCTYPE html><metacharset="utf-8"><style>.axistext { font:10px sans-serif;}.axisline,.axis path { fill: none; stroke: #000; shape-rendering: crispEdges;}</style><body><scriptsrc="http://d3js.org/d3.v3.min.js"></script><script>var customTimeFormat = timeFormat([ [d3.time.format("%Y"),function() {return true; }], [d3.time.format("%B"),function(d) {return d.getMonth(); }], [d3.time.format("%b %d"),function(d) {return d.getDate() != 1; }], [d3.time.format("%a %d"),function(d) {return d.getDay() && d.getDate() != 1; }], [d3.time.format("%I %p"), function(d) { return d.getHours(); }], [d3.time.format("%I:%M"),function(d) {return d.getMinutes(); }], [d3.time.format(":%S"),function(d) {return d.getSeconds(); }], [d3.time.format(".%L"),function(d) {return d.getMilliseconds(); }]]);var margin = {top:250, right: 40, bottom: 250, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;var x = d3.time.scale() .domain([new Date(2012,0, 1), new Date(2013, 0, 1)]) .range([0, width]);var xAxis = d3.svg.axis() .scale(x) .tickFormat(customTimeFormat);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 +")");svg.append("g") .attr("class","x axis") .attr("transform","translate(0," + height + ")") .call(xAxis);functiontimeFormat(formats) { return function(date) { var i = formats.length - 1, f = formats[i]; while (!f[1](date)) f = formats[--i]; return f[0](date); };}</script>