tickInterval is not working on d3 v4

[ahmeti]

First of all thank you for this plugin. I changed tickInterval. But the result has not changed on d3 v4 :(

Can you help with that?

CodePen: https://codepen.io/ahmeti/pen/PoYPpJN?editors=1010

Also tickInterval is working d3 v3

https://github.com/denisemauldin/d3-timeline/blob/8f257b2aa344cd8c9dc6e986d379ed97b388a1cd/dist/d3-timelines.js#L24-L30

[ahmeti]

Do you have any ideas? @denisemauldin

[denisemauldin]

What are you trying to get tickInterval to change to? Why are you trying to change tickInterval?

[ahmeti]

Hello @denisemauldin, Thank you for your reply.

Your example code shows each of them at one hour on X-axis. But I want to show each of them at 10 minute intervals on X-axis. For example;

Your default options & result:

tickFormat = { 
    format: d3.timeFormat("%I %p"),
    tickTime: d3.timeHours,
    tickInterval: 1,
    tickSize: 6
}

My options & result:

tickFormat = { 
    format: d3.timeFormat("%H:%M"),
    tickTime: d3.timeMinutes,
    tickInterval: 10, // I think this option not working on D3.v4  but works on D3.v3
    tickSize: 6
}

[ahmeti]

Is that a bug or not?

[RealKai42]

I am facing the same bug, and I found in line 305, the code is like this

if (tickFormat.tickValues !== null) {
    xAxis.tickValues(tickFormat.tickValues);
    } else {
    xAxis.tickArguments(tickFormat.numTicks || [tickFormat.tickTime, tickFormat.tickInterval]);
}

here the tickFormat.tickValues is undefined but tickFormat.tickValues !== null is True, so the code ignore the numTicks or [tickFormat.tickTime, tickFormat.tickInterval].

but when I fix it by if (tickFormat.tickValues !== null && tickFormat.tickValues !== undefined), but it still not work.

I am new to d3, so I don't know how to do next. sad

[RealKai42]

Is that a bug or not?

It's a bug, definitely

[RealKai42]

@denisemauldin hi, I only want to change the tickInterval to per day, but the default is per week, I change the tickInterval like this

.tickFormat({
            format: d3.timeFormat("%b %e"),
            tickTime: d3.timeDays,
            tickInterval: 1,
            tickSize: 6,
        })

but the plugin not working. I am new to d3, so I just want things to work, so I modify the code around line 305 like this

if (tickFormat.tickValues !== null && tickFormat.tickValues !== undefined) {
    xAxis.tickValues(tickFormat.tickValues);
} else {
    // xAxis.tickArguments(tickFormat.numTicks || [tickFormat.tickTime, tickFormat.tickInterval]);
    xAxis.tickArguments([d3.timeDay.every(1)]);
}

It's ugly, but its work. I hope you can modify the bug if you have time! Thanks!