d3.time.format中的时间格式

  • %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>

 

http://bl.ocks.org/mbostock/4149176

http://www.verisi.com/resources/d3-tutorial-basic-charts.htm

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值