question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

d3.svg.axis().ticks(d3.time.day, n) sets ticks at end and beginning of certain months for certain intervals

See original GitHub issue

I’m not sure there’s much that can be done about this, but for certain intervals you’ll get ticks at both the end and the front of the certain months.

For something like d3.svg.axis().ticks(d3.time.day, 3 /* or 1, 5, 10... anything divisible by 30 */), the ticks will look something like this:

Jan 25   Jan 28   **Jan 31   Feb 1**   Feb 3

This is because the conditional evaluates to true: https://github.com/mbostock/d3/blob/a40a611d6b9fc4ff3815ca830d86b6c00d130995/d3.js#L2414 on the first of the month and end of the month.

Following the D3 logic, here’s an example for axis.ticks(d3.time.day, 3):

// True for January 31
var dt = 3;
var d = new Date('January 31')
var time = d.getDate() - 1; // 30
var m = time % dt // 30 % 3 == 0
if (!m) times.push(d);

// True for February 1
var d = new Date('February 1')
var time = d.getDate() - 1; // 0
var m = time % dt // 0 % 3 == 0
if (!m) times.push(d);

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Reactions:1
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

4reactions
KamilSzotcommented, Apr 28, 2015

Isn’t there any way to place a tick every 3 days regardless of the month? Something like every 3 total days not every 3rd day of the month?

1reaction
mbostockcommented, Jul 5, 2015

Careful: that implementation appears to have a bug in time zones that have daylight saving time changes at midnight, or for dates before epoch (January 1, 1970)… but… close enough for the vast majority of use cases.

I will consider this issue for the new 4.0 API in d3-time and d3-scale. I’ve created two related issues, d3/d3-time#6 and d3/d3-scale#7. It’s pretty easy to create a three-day interval (regardless of month) in the new API thanks to interval.filter and day.count:

var threeday = day.filter(function(d) { return day.count(0, d) % 3 === 0; });

But I haven’t yet exposed a way to use such a custom interval with the new time scale. I’ll probably just allow you to pass an interval—or possibly a range function—to time.ticks, as before. (Though, I don’t think the new time scale will allow you to specify the optional step if you pass in a custom interval.)

Read more comments on GitHub >

github_iconTop Results From Across the Web

axis.ticks / D3 - Observable
Use axis.ticks to control which ticks are displayed by the axis. axis.ticks passes the arguments you specify to scale.ticks whenever the axis is...
Read more >
D3.js time scale tick marks - Years and months only
I'm trying to make a zoomable chart with time scale on the x axis. The default behaviour with ...
Read more >
Changing the number of ticks on an axis in d3.js v4
The following is the list of time intervals that D3 will consider when setting automatic ticks on a time based axis;.
Read more >
Axis | Vega-Lite
Axes provide axis lines, ticks, and labels to convey how a positional range represents a data range. Simply put, axes visualize scales. By...
Read more >
Time series and date axes in Python - Plotly
By default, the tick labels (and optional ticks) are associated with a specific grid-line, and represent an instant in time, for example, "00:00...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found