![](/img/trans.png)
[英]d3js: “Error: <circle> attribute cy: Expected length, ”NaN"
[英]Prob reading bar chart with d3js v7 Error: <rect> attribute height: Expected length, "NaN"
親愛的堆棧溢出社區,
我一直在嘗試使用 d3v7 為我的一個 Uni 項目創建一個條形圖,遵循_Blocks_
示例。 但是,我收到了這個問題標題中提到的錯誤。 顯然,我的代碼在讀取我的數據時出現問題,但我不知道如何解決這個問題。 如果您能在這里幫助我,那將非常有幫助:)
這是我的代碼:
var margin = {top: 5, right:10, bottom:5, left:10},
width = 575 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleBand()
.range([0, width])
.padding(0.1);
var y = d3.scaleLinear()
.range([height, 0]);
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("#bar").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// get the data
d3.csv("canton_pop.csv").then(function(data) {
// format the data
data.forEach(function(d) {
d.Population = +d.Population;
});
// Scale the range of the data in the domains
x.domain(data.map(function(d) { return d.Canton; }));
y.domain([0, d3.max(data, function(d) { return d.Population; })]);
// append the rectangles for the bar chart
svg.selectAll(".bar_chart")
.data(data)
.enter().append("rect")
.attr("class", "bar_chart")
.attr("x", function(d) { return x(d.Canton); })
.attr("width", x.bandwidth())
.attr("y", function(d) { return y(d.Population); })
.attr("height", function(d) { return height - y(d.Population); });
// add the x Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// add the y Axis
svg.append("g")
.call(d3.axisLeft(y));
});
這是我的 CSV 文件的樣子:
Canton;Population
Zürich;1553423
Bern;1043132
Luzern;416347
Uri;36819
Schwyz;162157
Obwalden;38108
Nidwalden;43520
Glarus;40851
Zug;128794
Fribourg;325496
Solothurn;277462
Basel-Stadt;196735
Basel-Landschaft;290969
Schaffhausen;83107
Appenzell Ausserrhoden;55309
Appenzell Innerrhoden;16293
St. Gallen;514504
Graubünden;200096
Aargau;694072
Thurgau;282909
Ticino;350986
Vaud;814762
Valais;348503
Neuchâtel;175894
Genève;506343
Jura;73709
運行我的代碼時,我能夠可視化圖形軸,但沒有出現條形圖,並且軸沒有任何刻度(下面是我得到的結果和控制台中出現的錯誤的圖像)。 希望有人可以在這里幫助我。
好的,我剛剛意識到問題出在我的 CSV 文件中,實際上我使用的是“;” 當我需要使用“,”時作為分隔符
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.