score:0

Accepted answer

You should append .tickFormat() method for xAxis variable:

var xAxis = d3.svg.axis().scale(x).orient("bottom")
            .tickFormat(function(d) {
                var f = ["12AM", "1AM", "2AM", "3AM", "4AM", "5AM", "6AM", "7AM", "8AM", "9AM", "10AM", "11AM", "12PM", "1PM", "2PM", "3PM", "4PM", "5PM", "6PM", "7PM", "8PM", "9PM", "10PM", "11PM"];
            return (f[d]);
        });

This method creates desirable captions:

enter image description here

If you want force d3.js not skip 1AM, 3AM etc., you should use .tickValues() method:

var xAxis = d3.svg.axis().scale(x).orient("bottom")
            .tickFormat(function(d) {
                var f = ["12AM", "1AM", "2AM", "3AM", "4AM", "5AM", "6AM", "7AM", "8AM", "9AM", "10AM", "11AM", "12PM", "1PM", "2PM", "3PM", "4PM", "5PM", "6PM", "7PM", "8PM", "9PM", "10PM", "11PM"];
            return (f[d]);
        })
        .tickValues([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]);

In this case the final picture will be:

enter image description here

But you should consider the horizontal size of the graph.

DEMO: http://jsfiddle.net/qy5ohw0x/2/


Related Query

More Query from same tag