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

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

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

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

1 个答案: