使用时间刻度的 D3.js 错误（路径为 NaN）

Question

我使用 d3.js 制作热图。我的数据是一个对象，我从中取出了最大和最小年份。当我d3.timeScale()用来初始化我的 x 轴时，我在 x 的相同位置渲染了我所有年的错误（这是由于控制台上的以下错误）

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)".

此处显示了一些涉及制作时间刻度和轴的代码

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));

我想知道是什么导致了这个错误，我之前做过类似的事情，但我唯一的区别是我将日期作为字符串传递给我的日期构造函数，这里我的值为年。

{
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.

Answer 1

在 D3 比例中，您必须将数组传递给range. API 很明确：

如果指定了范围，则将刻度的范围设置为指定的值数组。（强调我的）

因此，它应该是：

.range([0, WIDTH]);