使用时间刻度的D3.js错误(路径为NaN) [英] D3.js error using timescale (path is NaN)

问题描述

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

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

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

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

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.

推荐答案

在D3比例尺中，您必须将数组传递给range.该API很清楚:

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)

因此，应该是:

.range([0, WIDTH]);

这篇关于使用时间刻度的D3.js错误(路径为NaN)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！