d3.svg.axis().ticks(d3.time.day, n) sets ticks at end and beginning of certain months for certain intervals
See original GitHub issueI’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:
- Created 9 years ago
- Reactions:1
- Comments:10 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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?
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:
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.)