使用時間刻度D3.js錯誤（路徑是NaN）

使用d3.js製作熱圖。我的數據是我抽出最大和最小年份的一個對象。當我使用d3.timeScale()初始化我的X軸，即時得到與我多年的渲染x的相同位置的誤差（這是由於在控制檯上出現以下錯誤）使用時間刻度D3.js錯誤（路徑是NaN）

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.

來源

2017-09-13 abhinavm93

在D3尺度中，您必須將數組傳遞給range。該API是明確的：

如果指定範圍，設置刻度的範圍內的值的指定陣列。（重點煤礦）

因此，它應該是：

.range([0, WIDTH]);

來源

2017-09-13 12:53:18

謝謝。你傾向於監督的事情之一，我深深陷入了這個問題，忽略了我錯過了方括號 – abhinavm93

使用時間刻度D3.js錯誤（路徑是NaN）

回答

相關問題