我是d3和javascript的新手，正在尝试创建一个简单的条形图。我的CSV文件只有两列(访问次数和地点(。我尝试使用以下代码，但条形图显示不正确。唯一显示的是y轴标记正确，x轴没有标记。如果有人能看一眼并指出问题所在，我将不胜感激。我使用的是d3版本6。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./script/d3.min.js"></script>
<div id="bar_chart"></div>
<title>A1</title>
</head>
<body>
<script>
let margin = {top: 50, right: 50, bottom: 90, left: 70},
width = 760 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
let svg = d3.select("#bar_chart")
.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+")");
let data = d3.csv("./data.csv", function (d) {
d.Visitors = +d["Visitors"];
})
let x = d3.scaleBand()
.range([0, width])
.domain(d3.range(data.length))
.padding(0,2);
svg.append("g")
.attr("transform", "translate(0," + height +")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "translate(-10, 0)rotate(-45)")
.style("text-anchor", "end");
let y = d3.scaleLinear()
.domain([0, 4000000])
.range([height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
svg.selectAll("barchart")
.data(data)
.enter()
.append("rect")
.attr("x", function (d) { return x(d.Place); })
.attr("y", function(d) { return y (d.Visitors); })
.attr("width", x.bandwidth())
.attr("height", function (d) { return height - y(d.Visitors); })
.attr("fill", "darkgreen")
</script>
</body>
</html>
回调后，您可以使用数据
d3.csv("./data.csv", function (d) {
d.Visitors = +d["Visitors"];
let x = d3.scaleBand()
.range([0, width])
.domain(d3.range(data.length))
.padding(0,2);
svg.append("g")
.attr("transform", "translate(0," + height +")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "translate(-10, 0)rotate(-45)")
.style("text-anchor", "end");
let y = d3.scaleLinear()
.domain([0, 4000000])
.range([height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
svg.selectAll("barchart")
.data(d)
.enter()
.append("rect")
.attr("x", function (d) { return x(d.Place); })
.attr("y", function(d) { return y (d.Visitors); })
.attr("width", x.bandwidth())
.attr("height", function (d) { return height - y(d.Visitors); })
.attr("fill", "darkgreen")
})
访问https://www.tutorialsteacher.com/d3js/loading-data-from-file-in-d3js#d3.csv