Accepted answer

Not easy as in "call a single line of code", but you can roll your own time format easy enough. See here for an example. The key idea is that you have a list of date formats and a filter function which, given a date, returns true if the associated format is to be used. In your case you would need only two levels, one to display the date (if the date is midnight) or the time (if the date is 12 noon).


For d3 v4 and above. Specify the time for axisBottom in ticks

//Print ticks for every minute
this.xAxis = axisBottom(this.xScale).ticks(timeMinute.every(1));

//Print ticks for every hour
this.xAxis = axisBottom(this.xScale).ticks(timeHour.every(1));

Else you can tickformat to format the value to PM


It's worth noting that if you're using UTC time on your axis instead of local time, then d3 calls a different set of formatters internally. You need this:

          return (d3.utcSecond(date) < date ? formatMillisecond
          : d3.utcMinute(date) < date ? formatSecond
          : d3.utcHour(date) < date ? formatMinute
          : d3.utcDay(date) < date ? formatHour
          : d3.utcMonth(date) < date ? (d3.utcWeek(date) < date ? formatDay : formatWeek)
          : d3.utcYear(date) < date ? formatMonth
          : formatYear)(date);

instead of the calls referenced in the linked example above. The change is to substitute "d3.utcXXX(date)" for "d3.timeXXX(date)."