D3 x-axis tick format & tick value issues

Question

i am trying to format date-time ticks for the x-axis but i am not able to achieve what i want to.

 var margin = { top: 20, right: 30, bottom: 30, left: 40 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var z = d3.scale.category20c(); 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 + ")"); var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%SZ"); var data = [{ data: [ ["2016-01-28T15:45:26Z", 5.0], ["2016-01-30T15:45:26Z", 0.0], ["2016-02-01T15:45:26Z", 0.0], ["2016-02-03T15:45:26Z", 0.0], ["2016-02-05T15:45:26Z", 0.0], ["2016-02-07T15:45:26Z", 0.0], ["2016-02-09T15:45:26Z", 0.0], ["2016-02-11T15:45:26Z", 0], ["2016-02-13T15:45:26Z", 0], ["2016-02-15T15:45:26Z", 0], ["2016-02-17T15:45:26Z", 0], ["2016-02-19T15:45:26Z", 0], ["2016-02-21T15:45:26Z", 0], ["2016-02-23T15:45:26Z", 0], ["2016-02-25T15:45:26Z", 0] ], label: "a" }] 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() .interpolate("monotone") .x(function(d) { return x(parseDate.parse(d[0])); }) .y(function(d) { return y(d[1]); }); var ary = []; data.forEach(function(d) { ary.push(d.data); }); x.domain(d3.extent(d3.merge(ary), function(d) { return parseDate.parse(d[0]); })); y.domain([ d3.min(data, function(c) { return d3.min(c.data, function(v) { return v[1]; }); }), d3.max(data, function(c) { return d3.max(c.data, function(v) { return v[1]; }); }) ]); function calc(val) { var day = Math.floor((new Date() - val) / (24 * 60 * 60 * 1000)); if (day === 0) { return 'today'; } else { return '-' + day + 'D'; } } xAxis.tickFormat(function(d) { console.log("========="); console.log(d); console.log("========="); return calc(d); }); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis); var series = svg.selectAll(".series") .data(data) .enter().append("g") .attr("class", "series"); series.append("path") .attr("class", "line") .attr("d", function(d) { return line(d.data); }) .style("stroke", function(d, i) { return z(i); }); 

 text.inner-circle { font-weight: 400; font-size: 12px; text-transform: uppercase; } text.inner-text { font-weight: 400; font-size: 36px; font-family: 'Metric Regular', 'Metric'; text-align: center; font-style: normal; text-transform: uppercase; } path { stroke: steelblue; stroke-width: 2; fill: none; } .axis path, .axis line { fill: none; stroke: grey; stroke-width: 2; shape-rendering: crispEdges; } .grid .tick { stroke: lightgrey; stroke-opacity: 0.7; shape-rendering: crispEdges; } .grid path { stroke-width: 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

When i printing x.domain() , i am getting output as [Thu Jan 28 2016 15:45:26 GMT+0530 (India Standard Time), Thu Feb 25 2016 15:45:26 GMT+0530 (India Standard Time)] which are correct min & max values according to data with correct time.

But when below mentioned snippet of code runs, it doesn't starts passing values from Fri Jan 29 2016 00:00:00 GMT+0530 (India Standard Time) instead of Thu Jan 28 2016 15:45:26 GMT+0530 (India Standard Time) -

xAxis.tickFormat(function(d) {
console.log("=========");
console.log(d);
console.log("=========");
return calc(d);
});

So when the above snippet runs, it give me these values of d : Console Output

=========
Fri Jan 29 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Sun Jan 31 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Mon Feb 01 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Wed Feb 03 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Fri Feb 05 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Sun Feb 07 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Tue Feb 09 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Thu Feb 11 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Sat Feb 13 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Mon Feb 15 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Wed Feb 17 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Fri Feb 19 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Sun Feb 21 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Tue Feb 23 2016 00:00:00 GMT+0530 (India Standard Time)
=========
=========
Thu Feb 25 2016 00:00:00 GMT+0530 (India Standard Time)
=========

But i want code to pass date-time values that are mentioned in the input without changing them.

Please help me.

Answer 1

The standard behaviour of axis is to use regularly-spaced ticks with nice round values.

Since you know precisely where you want your ticks; then axis.tickValues([values]) is your friend. Extract the list of date-times from your data and give them to your xAxis through this function.

Edit: to get your array of values, the following lines should do the work

myTickValues = ary[0].map(function(d){return parseDate.parse(d[0])})
xAxis.tickValues(myTickValues);