d3 / d3-scale

Encodings that map abstract data to visual representation.
https://d3js.org/d3-scale
ISC License
1.59k stars 286 forks source link

2-day ticks between months #245

Closed FlorianDr closed 3 years ago

FlorianDr commented 3 years ago

Hey there,

I'm trying to create uniformly-spaced time ticks with 'time.ticks()'. However, the function returns non equidistant intervals for the 2-day ticks going over the end of a month. Here is an example:

https://jsfiddle.net/6vopq2by/

The document states "The returned tick values are uniformly-spaced (mostly)". Why "mostly"?

How can I achieve my use cases for the provided instance? Will I need to make use of '.every()' with a custom interval?

Thank you in advance, Florian

mbostock commented 3 years ago

See interval.every:

The meaning of step is dependent on this interval’s parent interval as defined by the field function. For example, d3.timeMinute.every(15) returns an interval representing every fifteen minutes, starting on the hour: :00, :15, :30, :45, etc. Note that for some intervals, the resulting dates may not be uniformly-spaced; d3.timeDay’s parent interval is d3.timeMonth, and thus the interval number resets at the start of each month.

If you want every other day rather than every odd date, then you need to create a custom time interval and use that instead of time.ticks() (which uses d3.timeTicks or d3.utcTicks internally). Here’s how you would do that:

https://observablehq.com/d/906f777c9f2f0701

FlorianDr commented 3 years ago

Awesome! Thank you for the fast response, @mbostock