在d3 js中为x时间轴设置范围和域

Question

I am fairly new to d3 js and I still have issues setting the axis. I am trying to set a time axis for a horizontal floating bar chart . My code looks relatively the same with the small exception that from and to are 201808, 201809 etc. (year and month).

A jsfiddle to the edited code from the example linked below. The changes are in the data set and in:

var xAxis = d3.axisBottom(x)
      .tickFormat(d3.time.format("%Y%b"));

Apparently this is not the smartest way to assign time to an axis, but I am still having issues with the domain, range and scaling of the axes.

Answer 1

Your main problem is that you can't mix d3v3 and d3v4 API calls

Not

var xAxis = d3.axisBottom(x)
      .tickFormat(d3.time.format("%Y%b"));

But

var xAxis = d3.svg.axis().scale(x).orient("bottom");
    // .tickFormat(d3.time.format("%Y%b"))

A tip look at your console ans see a possible reason of the problem why you don't see stuff

To get a time axis you need to use a time scale and you need to parse the times but they are number so you might could do with

function NumberToDate(n) {
   return new Date(n/100, (n%100)-1, 1);
}

Julyy is with one (1) y.

How can May go from the future back in time

{"month": "May", "to": 201803, "from": 201812}