[Solved]-How do I make D3 draw the axis from the start of a dataset?-d3.js

Omigosh!! I ran into the same problem with d3 axes.

The previous answer led me to finding the answer that helped me. Thanks!!!!

The problem was that D3 was adding hours to dates without telling me. It defaulted the time to something like 8:00 every day instead of midnight.

Solution: Everywhere where I read a date into D3, I set the time with setHours(0,0,0,0).

Here's some example code:

    svgContainer.selectAll(".dot")
    .data(spaceCircleData)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("r", 3)
    .attr("cx", function(d) { return xAxisScale(new Date(d.date).setHours(0,0,0,0)) + horizMargin; })
    .attr("cy", function(d) { return yAxisScale(d.amount) - vertMargin; });

Had I read all the data from 1 place, I would have changed this one the data.foreach.

your isuue is regarding the timzone problem...

I accept the fact of Timezone changes in your input ...

Incase still got problem in alignment

//offset to handle the Timezone priblem
var offset=(new Date().getTimezoneOffset()/60)+1;

This gives you the Offset of your timeZone..

(may be the calculation for offset chages check it out using log)

//Formatise the data

data.forEach(function(d) {
    d.date =d3.time.hour.offset(new Date(d.date),offset);
    });

this will formatise your date according to your timezone