我正在制作一個簡單的條形圖，目前正在嘗試添加 Y 軸。當我嘗試使用該call()函式時，它會引發錯誤。
d3.v7.min.js:2 Error: <path> attribute d: Expected number, "M-6,NaNH0VNaNH-6".
有誰知道出了什么問題？我在下面提供了我的代碼。
let dataNumsOnly = [];
let labels = [];
fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json')
.then(response => response.json())
.then(data => {
let dataForChart = data;
dataForChart = dataForChart.data;
for (let i = 0; i < dataForChart.length; i ) { //grabs data and labels.
dataNumsOnly.push(dataForChart[i][1]);
labels.push(dataForChart[i][0]);
}
let svg = d3.select('body')
.append('svg')
.attr('width', 962)
.attr('height', 600);
svg.selectAll('rect')
.data(dataNumsOnly)
.enter()
.append('rect')
.attr('width', 3)
.attr('height', d => d / 32)
.attr("x", (d, i) => i * 3.5)
.attr('y', d => 600 - d / 32)
.style('fill', "rgb(51, 173, 255)");
let yScale = d3.scaleLinear()
.domain(0, 100)
.range(600, 0);
const yAxis = d3.axisLeft()
.scale(yScale);
svg.append('g')
.call(yAxis);
});
謝謝你。
uj5u.com熱心網友回復：
沒關系，我懂了！我忘記了域和范圍的括號！
let dataNumsOnly = [];
let labels = [];
fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json')
.then(response => response.json())
.then(data => {
let dataForChart = data;
dataForChart = dataForChart.data;
for (let i = 0; i < dataForChart.length; i ) { //grabs data and labels.
dataNumsOnly.push(dataForChart[i][1]);
labels.push(dataForChart[i][0]);
}
let svg = d3.select('body')
.append('svg')
.attr('width', 962)
.attr('height', 600);
svg.selectAll('rect')
.data(dataNumsOnly)
.enter()
.append('rect')
.attr('width', 3)
.attr('height', d => d / 32)
.attr("x", (d, i) => i * 3.5)
.attr('y', d => 600 - d / 32)
.style('fill', "rgb(51, 173, 255)");
let yScale = d3.scaleLinear()
.domain([0, 1000])
.range([600, 0]);
const yAxis = d3.axisLeft()
.scale(yScale);
svg.append('g')
.attr('transform', 'translate(1)')
.call(yAxis)
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/361245.html
標籤：javascript d3.js 图形 图表 编译器错误