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)."
- d3.js default axis.tickFormat to 24 hour clock
- Time axis in 24 hour clock
- Changing default chart axis thickness in Billboard.js / D3.js
- D3 js bar chart with 24 hour x axis
- Round x axis of a time scale to nearest half hour
- d3.js v3 time scale: How to change default hour in label to specific hour
- How do you change the default axis labels in D3
- nvd3 - how to set y axis to default values
- Formatting text from axis ticks in plotly using tickformat
- d3 - Format an integer as time on 24 hour clock
- Convert string timestamp to hour axis
- How to make hour and minutes as x axis in nvd3.js graph
- I want to remove the commas from the X axis with d3, but tickFormat does not work and instead, throws an error
- repeated y axis values with tickFormat d3
- Dimple JS multiple y axis - change default sorting
- cubism.js last hour axis
- d3 axis labeling
- rotate x axis text in d3
- How to update axis using d3.js
- Remove end-ticks from D3.js axis
- d3.js: Align text labels between ticks on the axis
- dealing with dates on d3.js axis
- d3.js: tickformat - adding a % sign without multiplying by 100
- D3.js: Using images (with filenames specified in data) as tick values on axis
- Create a D3 axis without tick labels
- How can I get the D3.js axis ticks and positions as an array?
- d3.js axis labels - color not changing
- D3: Is it possible to zoom+pan one axis and only pan the other?
- D3 - using strings for axis ticks
- How to disable some streams by default in a nvd3 Simple Line Chart?
More Query from same tag
- HTML Range Slider with Play/Pause Loop
- How to specify the colors and toggle labels for each category in R sunburst?
- d3 - amending arrays
- Word Cloud Generator
- d3 select elements having no id
- How to draw a dynamic line chart based on an infotable?
- dc.js / d3.js - How to hide a bar chart x-axis category value if its bar value equals zero?
- How do I change from JS Array to JS Object for D3 Chart
- How to drag and drop a group of rectangles in svg in d3.js?
- Multi donut graph with curved borders
- How to update the map scale on crossfilter dimension.filter()?
- hide circles on Orthographic drag
- D3: Not able to click on SVG element
- Ordering columns in a stacked bar chart - dimple
- D3.js transitions between charts
- Adding text labels in middle of each bar - stacked bar chart & Mouse Over Events
- d3js enter, update, exit confusion: need assistance please
- Click event not working after interation
- d3 transitions not working in multiple browsers
- Phoenix: How to load a static tsv file for d3 graph
- Cannot access variables in angular from d3 Funnel js callback
- CSS equivalent to .attr("data-html", "true")
- Making a d3 chart update with new data
- Can't make multiline text on d3 pie chart
- d3js dont drawing path
- d3.js stacked graph
- How to call a function when d3.brush is cleared?
- How to add location specific data to markers on a map
- Data on x-axis is one day off (data for May 24 is showing up as May 23, etc etc) (d3, nvd3)
- NaN on Force-Directed Layout Append in D3.js