D3 Non-Continuous Dates Domain Gives Gaps on X-Axis

Question

I want to plot some time series data that is not continuous (gaps in the dates for weekends, holidays, etc..). It\'s daily data.

The data looks something like:

Answer 1

The d3fc-discontinuous-scale component adapts any other scale (for example a d3 time scale) and adding the concept of discontinuities.

These discontinuities are determined via a 'discontinuity provider' the built in discontinuitySkipWeekends allows you to skip weekends.

Here's an example:

const skipWeekendScale = fc.scaleDiscontinuous(d3.scaleTime())
  .discontinuityProvider(fc.discontinuitySkipWeekends());

And here's a complete demo: https://bl.ocks.org/ColinEberhardt/0a5cc7ca6c256dcd6ef1e2e7ffa468d4

Answer 2

As Lars Kotthof points out, you can create an ordinal x axis, which "looks" like a time scale. Assuming you want to plot your time series as a line, here is an example how to do it: http://jsfiddle.net/ee2todev/3Lu46oqg/

If you want to customize your format for the dates, e.g. respresent the date as day (of the week), day and month you have to convert your string to a date first. I added one example which formats the dates in a common German format. But you can easily adjust the code to your needs. http://jsfiddle.net/ee2todev/phLbk0hf/

Last, but not least, you can use

axis.tickValues([values])

to choose the dates you want to display. See also: https://github.com/mbostock/d3/wiki/SVG-Axes#tickFormat