D3.js error using timescale (path is NaN)

问题

Im using d3.js to make a heatmap. My data is an object out of which i have pulled out the maximum and minimum year. When i use d3.timeScale() to initialise my x axis, im getting an error with all my years rendering on the same position of x ( this is due to the following errors on the console)

d3.min.js:2 Error: <path> attribute d: Expected number, "MNaN,6V0.5HNaNV6". (anonymous) @ d3.min.js:2 13d3.min.js:2 Error: <g> attribute transform: Expected number, "translate(NaN,0)".

Some of the code which involves making the time scale and the axis is shown here

const MIN_DATE = new Date(MIN_YEAR, 0),
    MAX_DATE = new Date(MAX_YEAR, 0);

var x = d3.scaleTime()
    .domain([MIN_DATE, MAX_DATE])
    .range(0, WIDTH);

 var svg = d3.select('.chart')
    .attr('width', WIDTH + margins.left + margins.right)
    .attr('height', HEIGHT + margins.top + margins.bottom);

var g = svg.append('g')
    .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')');

g.append('g')
    .attr('class', 'axis')
    .attr('transform', 'translate(0,' + HEIGHT + ')')
    .call(d3.axisBottom(x));

Im wondering what is causing this error ,i've made something similar earlier but the only difference i had there was that i was passing the Date as a string to my Date constructor, here i have the value as years.

{
year: 2012,
month: 3,
variance: 0.703
},
Im using the year in as my `MIN_YEAR`, which i recieve through an API call. The year is a number. `MIN_YEAR` and `MAX_YEAR` are being assigned correctly.

回答1:

In D3 scales, you have to pass an array to range. The API is clear:

If range is specified, sets the scale’s range to the specified array of values. (emphasis mine)

Therefore, it should be:

.range([0, WIDTH]);

来源：https://stackoverflow.com/questions/46198038/d3-js-error-using-timescale-path-is-nan

标签

javascript

d3.js

charts