D3 Tick marks slightly off on xAxis

Question

While creating a D3 Area Chart, I noticed that my X Axis tick marks are off shifted the the right just slightly:

For my code, I generate the xAxis like:

const x = d3.scaleTime()
    .domain(d3.extent(data, d => Date.parse(d.date)))
    .range([margin.left, width - margin.right]);

const xAxis = g => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3
        .axisBottom(x)
        .tickValues(data.map(d => {
            return timeParse(d.date);
        }))
            .tickFormat(timeFormat)
            .tickSizeOuter(0)
        )

svg.append("g")
    .call(xAxis);

Not sure what I am doing wrong that is causing the tick marks to be slightly shifted to the right. If I don't include the .tickSizeOuter(0) part, the start and end tick marks look to be in normal spots but the data point ticks are still off.

How can I adjust these to be in the correct spot?

EDIT

Here is my data for this graph:

data = [
    {date: "2019-02-01", value: 100}, 
    {date: "2019-03-01", value: 1}]
]

And here is the timeParse var:

var timeParse = d3.timeParse("%Y-%m-%d");

score 3 · Answer 1 · answered Mar 13 '19 at 00:11

You likely have a mix of UTC and local timezones. For the domain you use Date.parse(d.date). It assumes UTC timezone (because format is YYYY-MM-DD, new behavior starting with ES5) whereas d3.timeParse uses local time zone. This may help: Why does Date.parse give incorrect results?

score 1 · Answer 2 · answered Mar 13 '19 at 16:23

As @Chris and @Noleli stated in his above answer, I had a UTC/TimeZone mix up. So after looking into that a little bit, I found a new function that I can use. Instead of using d3.timeParse as my parse function:

var timeParse = d3.timeParse("%Y-%m-%d");

D3 also provides a d3.utcParse parse function.

var timeParse = d3.utcParse("%Y-%m-%d");

Using this provides the correct results.

score 0 · Answer 3 · answered Mar 12 '19 at 22:39

0

Without seeing your data or timeParse it’s hard to know, but it could be a time zone issue. Try setting your computer to UTC and see if the problem goes away.

answered Mar 12 '19 at 22:39

Noleli

451
3
5

I added the data and the timeParse for you. Time Zone shouldn't be of a factor because I am only parsing specific dates, not time – BlondeSwan Mar 12 '19 at 22:52

D3 Tick marks slightly off on xAxis

3 Answers3