How to format time on xAxis using d3.js

Question

According to the demo at http://bl.ocks.org/mbostock/3883245

I don't know how to format time on xAxis

this is my code: 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:

In svg, the time is 12 hours, but in my data the time is 24 hours. how to save the same format on svg and data?

Any help is appreciated. (ps: I hope you are not against my English, it is so bad.)

Answer 1

You can use the tickFormat function for an axis object as shown below

var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .tickFormat(d3.time.format("%H")); 

%H indicates hour (24-hour clock) as a decimal number [00,23] . Check out this D3 time formatting link for more information.

You can check the working example in this influx 24-hour time example

Answer 2

The accepted answer is really correct, but in my case I needed flexibility so that the formats could adapt to different scales (I think scaling), but also to provide 24-hour time. The key is to define a time format with multiple resolutions . See the Documentation page for more details.

My code is:

 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); 

Answer 3

I want to add this link to an awesome demo page. This is a playground where you can choose which format specifier you need for your business. This is very useful if you don’t remember / don’t know which format specifier should go to your d3.timeFormat function.

I also want to note that if you have version d3 4, you should use d3.timeFormat instead of d3.time.format .