score:1

Accepted answer

I'm not a D3 expert; heck I'm not even a D3 novice. It seems however that the library is paying attention to the fact that your timestamps are for a point between two day boundaries (midnight I guess). Thus the dots on the graph show up to the right of the day labels, because it's treating time as more-or-less continuous and not at the granularity of a single day.

score:0

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.

score:1

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


Related Query

More Query from same tag