score:0

So, the missing piece of the puzzle seems to be the d3.utc[time_frame] functions (e.g. d3.utcSecond). This seems to solve the issue and give us a the default tickFormat.

This is what I ended up with (could probably use some refactoring for clarity):

function multiFormat(date: Date) {
  return (d3.utcSecond(date) < date
    ? d3.timeFormat('.%L')
    : d3.utcMinute(date) < date
    ? d3.timeFormat(':%S')
    : d3.utcHour(date) < date
    ? d3.timeFormat('%H:%M')
    : d3.utcDay(date) < date
    ? d3.timeFormat('%H %p')
    : d3.utcMonth(date) < date
    ? d3.utcWeek(date) < date
      ? d3.timeFormat('%a %d')
      : d3.timeFormat('%b %d')
    : d3.utcYear(date) < date
    ? d3.timeFormat('%B')
    : d3.timeFormat('%Y'))(date)
}

Related Query